【笔记】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();

完成