Redux实战应用笔记

记录一次redux实战笔记

资源地址

• github地址:redux
• 文档地址：
  • 英文：英文文档
  • 中文：中文文档

安装

npm i redux --save
# or
yarn add redux

使用

在src目录下创建redux文件夹，用于存放和redux状态管理相关的资源

1.action

在redux目录下创建action文件，分别存放actionType和Action,完整目录如下：

├─ src
│  ├─ redux
│  │  └─ action # action文件目录
│  │  │  └─ action_type.js # 统一常量类型管理文件
│  │  │  └─ user.js # 用户模块action
│  │  │  └─ common.js # 公共模块action

1.1 action类型

• 文件路径：src/redux/action/action_type.js
• 说明：项目集中管理action类型，便于团队协作开发，便于代码维护

// action_type.js
// 获取用户信息
export const GET_USERINFO = "getUserInfo";
// 设置用户信息
export const SET_USERINFO = "setUserInfo";
// 设置开关
export const SET_FLAG = "setFlag";

1.2 action模块

在action目录下分别创建user和common模块，这里只是演示效果，具体实现根据自身业务编码

• user.js 用户模块

// 引入action_type变量
import { GET_USERINFO, SET_USERINFO } from "./action_type";

// 导出获取用户信息action
export const getUserInfo = (data) => ({ type: GET_USERINFO, data });
// 导出设置用户信息action
export const setUserInfo = (data) => ({ type: SET_USERINFO, data });

1.3 common.js 公共模块

import { SET_FLAG } from "./action_type";

// 导出设置开关action
export const setFlag = (data) => ({ type: SET_FLAG, flag });

2.reducers

在redux目录下创建reducers文件,用于管理项目中各个模块的reducer完整目录如下：

├─ src
│  ├─ redux
│  │  └─ reducers # reducersw文件目录
│  │  │  └─ common.js #  公共模块reducers
│  │  │  └─ user.js # 用户模块reducers
│  │  │  └─ index.js # 集中导出reducer

2.1 common.js 公共模块

测试演示代码

// 初始化
const flag = false
export default function commonReducer(preState = flag, action) {
  const { type, data } = action;
  switch (type) {
    case "getFlag":
      return preState;
    case "setFlag":
      return preState = data
    default:
      return preState;
  }
}

2.2 user.js 用户模块

// 引入action_type
import { GET_USERINFO, SET_USERINFO } from "../actions/action_type";

// 初始化
const initState = { name: "hu-snail", age: 27 };
export default function userReducer(preState = initState, action) {
  const { type, data } = action;
  switch (type) {
    case SET_USERINFO:
      return Object.assign(preState, {...data});
    case GET_USERINFO:
      return preState;
    default:
      return preState;
  }
}

2.3 index.js 集中导出reducers

// 分别引入各个模块的reducer，可以优化不必每次都单独模块引入
import userReducer from "./user";
import commonReducer from "./common";

// 合并reducer
function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers);
  return function (state = {}, action) {
    const nextState = {};
    reducerKeys.forEach(
      (reducerKey) =>
        (nextState[reducerKey] = reducers[reducerKey](
          state[reducerKey],
          action
        ))
    );
    return nextState;
  };
}

// 导出reducer
export default combineReducers({ userReducer, commonReducer });

3.store.js

// 引入redux
import { createStore } from "redux";
// 引入reducers
import reducers from "./reducers";
// 导出redux
export default createStore(reducers);

在组件中使用

// 引入store
import store from "../redux/store.js";
// 引入user模块的action
import { setUserInfo } from "../redux/actions/index.js";

export default class Demo extends Component {
  componentDidMount() {
   console.log('打印store信息', store)
  }
  render() {
    // 获取user模块的数据
    const { name, age } = store.getState().userReducer;
    return (
      <div className="layout-container">
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      </div>
    )
   }
 }