【前端知识】React 基础巩固(三十一)——store数据的订阅和Redux的优化-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端知识】React 基础巩固(三十一)——store数据的订阅和Redux的优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React 基础巩固(三十一)——store数据的订阅和Redux的优化

一、store数据的订阅

store/index.js

const { createStore } = require("redux");

// 初始化数据
const initialState = {
  name: "test",
  title: "hello redux",
};

function reducer(state = initialState, action) {
  // 采用switch 替代 if  
  switch (action.type) {
    case "change_name":
      return {
        ...state,
        name: action.name,
      };
    // case / return
    default:
      return state;
  }
}

// 创建的store
const store = createStore(reducer);

module.exports = store;

test.js

const store = require("./store");

// 采用订阅方式
const unsubscribe = store.subscribe(() => {
  console.log("subscribe:", store.getState());
});

// 使用action修改store中的数据
store.dispatch({
  type: "change_name",
  name: "change name test",
});

store.dispatch({
  type: "change_name",
  name: "change name test111",
});

unsubscribe();

二、Redux的优化

redux代码优化：
1. 将派发的action生成过程放到一个actionCreators函数中
2. 将定义的所有actionCreators的函数，放到一个独立的文件中：actionCreators.js
3. actionCreators 和 reducer 函数中使用字符串常量是一致的，所以将常量抽取到一个独立的constants.js文件中
4. 将reducer和默认值（initialState）放到一个独立的reducer.js文件中

test.js

const store = require("./store");
const { changeNameAction } = require("./store/actionCreators");

// 采用订阅方式
const unsubscribe = store.subscribe(() => {
  console.log("subscribe:", store.getState());
});

// 使用action修改store中的数据
store.dispatch(changeNameAction("change name test"));

store.dispatch(changeNameAction("change name test111"));

unsubscribe();

store/index.js

const { createStore } = require("redux");
const reducer = require("./reducer")

// 创建的store
const store = createStore(reducer);

module.exports = store;

store/actionCreators.js

const { CHANGE_NAME } = require("./constants");
// actionCreators: 帮助我们创建action

const changeNameAction = (name) => {
  return {
    type: CHANGE_NAME,
    name,
  };
};

module.exports = {
  changeNameAction,
};

store/constants.js

const CHANGE_NAME = "change_name";

module.exports = {
  CHANGE_NAME,
};

store/reducer.js

const { CHANGE_NAME } = require("./constants");

// 初始化数据
const initialState = {
  name: "test",
  title: "hello redux",
};

// 定义reducer函数：纯函数
// 两个参数：
// 1.store中上一次的值；
// 2.本次需要更新的action
// 返回值：它的返回值会作为sto re之后存储的state
function reducer(state = initialState, action) {
  console.log("reducer:", state, action);
  // 有新数据进行更新的时候，那么返回一个新的state
  switch (action.type) {
    case CHANGE_NAME:
      return {
        ...state,
        name: action.name,
      };
    // case / return
    default:
      return state;
  }

  // 若没有新数据更新，返回之前的state
  // return state;
}

module.exports = reducer;