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

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

一、store数据的订阅

1. 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;
   
   

2. 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文件中

1. 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();
   
   

2. store/index.js

   const { createStore } = require("redux");
   const reducer = require("./reducer")
   
   // 创建的store
   const store = createStore(reducer);
   
   module.exports = store;
   
   
   

3. store/actionCreators.js

   const { CHANGE_NAME } = require("./constants");
   // actionCreators: 帮助我们创建action
   
   const changeNameAction = (name) => {
     return {
       type: CHANGE_NAME,
       name,
     };
   };
   
   module.exports = {
     changeNameAction,
   };
   
   

4. store/constants.js

   const CHANGE_NAME = "change_name";
   
   module.exports = {
     CHANGE_NAME,
   };
   
   

5. 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;
   
   

6. 运行结果