【笔记】Redux学习笔记

发表于 更新于 阅读次数：

前言

Redux一个用于应用程序状态管理的开源JavaScript库。Redux经常与React搭配运用，但其也可以独立使用。（维基百科）

Redux的3大原则：单一数据源、State是只读的、使用纯函数来修改数据

下载依赖

1
npm install redux

定义Store

src/store/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const { createStore } = require("redux");

const initialState = {
  key: "default"
};

const CHANGE_KEY = "changeKey";

function reducer(state = initialState, action) {
  switch (action.type) {
    case CHANGE_KEY:
      const objCopy = Object.assign({}, state, {});
      objCopy.key = action.payload;
      return objCopy;
    default:
      return state;
  }
}

const store = createStore(reducer);

module.exports = {
  store: store,
  CHANGE_KEY: CHANGE_KEY
};

获取数据

src/index.js
1
2
3
const { store } = require("./store/index.js");

const state = store.getState();

修改数据

  • 通过派发action修改数据
src/index.js
1
2
3
4
5
6
const { store, CHANGE_KEY } = require("./store/index.js");

store.dispatch({
  type: CHANGE_KEY,
  payload: "value"
});

订阅数据

  • 每当store中的state发生改变，就执行一次订阅的回调函数
src/index.js
1
2
3
4
5
const { store } = require("./store/index.js");

store.subscribe(() => {
  console.log(store.getState());
});

取消订阅

  • 执行订阅后会返回一个用于取消订阅的回调函数，通过执行这个回调函数来取消订阅
src/index.js
1
2
3
4
5
6
7
const { store } = require("./store/index.js");

const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

unsubscribe();

中间件

  • 通过猴子补丁定义中间件

派发对象中间件

src/store/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const { createStore } = require("redux");

const initialState = {
  key: "default"
};

const CHANGE_KEY = "changeKey";

function reducer(state = initialState, action) {
  switch (action.type) {
    case CHANGE_KEY:
      const objCopy = Object.assign({}, state, {});
      objCopy.key = action.payload;
      return objCopy;
    default:
      return state;
  }
}

const store = createStore(reducer);

// 1. 定义中间件
function logger(store) {
  const next = store.dispatch;

  function dispatchAndLog(action) {
    // 派发对象
    next(action);

    // 中间件逻辑
    console.log("");
  }

  store.dispatch = dispatchAndLog;
}

// 2. 应用中间件
logger(store);

module.exports = {
  store: store,
  CHANGE_KEY: CHANGE_KEY
};
  • 派发对象
src/index.js
1
2
3
const { store } = require("./store/index.js");

store.dispatch({});

派发函数中间件

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const { createStore } = require("redux");

const initialState = {
  key: "default"
};

const CHANGE_KEY = "changeKey";

function reducer(state = initialState, action) {
  switch (action.type) {
    case CHANGE_KEY:
      const objCopy = Object.assign({}, state, {});
      objCopy.key = action.payload;
      return objCopy;
    default:
      return state;
  }
}

const store = createStore(reducer);

// 1. 定义中间件
function logger(store) {
  const next = store.dispatch;

  function dispatchAndLog(action) {
    // 派发函数
    if (typeof action === "function") {
      action(store.dispatch, store.getState);
    }

    // 中间件逻辑
    console.log("");
  }

  store.dispatch = dispatchAndLog;
}

// 2. 应用中间件
logger(store);

module.exports = {
  store: store,
  CHANGE_KEY: CHANGE_KEY
};
  • 派发函数
src/index.js
1
2
3
4
5
const { store } = require("./store/index.js");

store.dispatch(function (dispatch, getState) {
  dispatch({});
});

完成