react项目中redux配置（附带每一步的源码）

最新推荐文章于 2022-08-08 17:33:03 发布

原创最新推荐文章于 2022-08-08 17:33:03 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #前端

react 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍前端项目配置，分为三部分。actions负责收集并提交state变化，含类型和函数创建；reducers更新state状态，可细化拆分后集合构建大state；全局只需一个store，一次初始化即可。还给出源码目录配置，方便学习交流。

配置总共分为三部分

一.actions：负责收集并向reduces提交state的变化,自身可分为两部分actions类型和actions函数创建

（1）actions —type 常量类型，主负责向reduces
（2）actions —fn 函数创建组件中触发提交函数

二.reducers 更新state状态，可根据state数据类型拆分成单个reducer，把reducers细化,后面通过集合构建出最终的大state

三.全局只需要有一个store，不需要像网站中资料介绍的在每一个组件一样去初始化一个store，一个项目集合在这初始化一次就可以；

store.dispatch() // 提交
store.sbuscribe() // 组件中监听reducer的变化，即state的变化回调
store.getState() // 获取state的值，通常和store.sbuscribe() 结合使用

源码部分：

目录配置
在这里插入图片描述

actions:

index.js

/* actions 类型
* TYPE_GET_LIST 这是一个关于点击类型获取列表的定义
*/
import {TYPE_GET_LIST,IS_LOGIN} from "./type"


/* actions 创建函数
*actions 创建函数和actions是两个概念
*/
export function getType(opt){
  return {type: TYPE_GET_LIST, opt}
}
export function isLogin(flag){
  return {type: IS_LOGIN, flag}
}

type.js

/* actions 类型type */
export const TYPE_GET_LIST = "TYPE_GET_LIST";
export const IS_LOGIN = "IS_LOGIN";

/* 其他常量 */
export const otherType = {
  TO_DO: "TO_DO"
}

reducers

index.js

/**
 * redux 管理入口
 */
import {combineReducers} from "redux"
import userBasketReducer from './userReducer';
import {TYPE_GET_LIST, IS_LOGIN} from "../actions/type"

/* 不同数据结构的单个state */
function typeInfo(state={}, action) {
  console.log(state, action, "这个是tyInfo的信息");
  switch (action.type) {
    case TYPE_GET_LIST: return Object.assign({}, state, {typeInfo: action.opt});
    default: return state;
  }
};
function isLogin(state=false, action) {
  console.log(state, action);
  switch (action.type) {
    case IS_LOGIN: return Object.assign({}, state, {isLogin: action.flag});
    default: return state;
  }
};

// 汇总成一个大的state
const reducers = combineReducers({
  userBasket: userBasketReducer,
  typeInfo,
  isLogin
});

export default reducers;

store

import { createStore } from 'redux'
import reducers from '../reducers'
const store = createStore(reducers)

export default store;

如果哪儿不懂可以留言我会快速回复，拆分的比较细，有些地方可能没必要拆分，完全是为了自己练习和做个笔记，也方便大家阅读，不足之处请指教互相交流学习