React的Redux

最新推荐文章于 2024-04-09 16:31:11 发布

lxn_zyl

最新推荐文章于 2024-04-09 16:31:11 发布

阅读量78

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/lxn_zyl/article/details/117412005

版权

我比较菜,有大佬可以补充一下,指出错误

store.js文件:

import {createStore, combineReducers} from 'redux';

import {reducer as firstReducer} from '../views/First/_index.js';
import {reducer as twoReducer} from '../views/TwoRedux/_index.js';
import {reducer as zero } from '../views/zero/_index.js'

const reducer = combineReducers({
    first:firstReducer,
    two:twoReducer,
    zero:zero
})

export default createStore(reducer);

之后就可以在jsx文件里用

mapStateToProps函数获取里面所导入的内容了

App.jsx文件里的两个函数:

mapStateToProps函数:

mapStateToProps方法就是容器组件向store声明需要的state的地方，因为我们的store是整个应用只有一份，根据redux的思想通过context可以保证每一个组件都可以从context中获取到store，不需要一级一级的从顶层传递下来。所以，一般容器组件上会有这个函数负责通过context获取到store中想要的state，即从store中获取到的state相当于容器组件从父组件拿到的props，因此，mapStateToProps函数一般只存在于容器组件（或顶层组件）中。

由于，store中的所有state都由reducer来更新，所有一般mapStateToProps方法中需要定义所有的reducer，把所有的reducer的结果都要拿到，保证我们的store中能包含所有的state，也就是我们这个大应用需要的所有数据都能从顶层组件（或容器组件）获取，然后传递下去；

写法:

const mapStateToProps = (state) =>({
XXX:state.XXXReducer,
YYY: state.YYYReducer,
ZZZ: state.ZZZReducer
})

类似于:mobx里的@inject('four')获取数据源并为此声明的作用.

mapDispatchToProps函数:

const mapDispatchToProps = (dispatch, ownProps) => {
    
    return {
//onAddFn为自定义
        onAddFn: (text,viewDate,ajaxCfg) => dispatch(actions.AddTodo(text,vie	wDate,ajaxCfg,dispatch))
    }
};

在页面使用 dispatch

const {dispatch} = this.props;
dispatch(action.AddTodo()) 

export default connect(mapStateToProps,null)(view)

mapDispatchToProps用于建立组件跟store.dispatch的映射关系,可以是一个object，也可以传入函数

如果mapDispatchToProps是一个函数，它可以传入dispatch,ownProps, 定义UI组件如何发出action，实际上就是要调用dispatch这个方法

mapStateToProps（state, ownProps）

mapStateToProps是一个函数，用于建立组件跟 store 的 state 的映射关系

作为一个函数，它可以传入两个参数，结果一定要返回一个 object

传入mapStateToProps之后，会订阅store的状态改变，在每次 store 的 state 发生变化的时候，都会被调用

ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也会被调用。例如，当 props接收到来自父组件一个小小的改动，那么你所使用的 ownProps 参数，mapStateToProps 都会被重新计算）。

mapStateToProps可以不传，如果不传，组件不会监听store的变化，也就是说Store的更新不会引起UI的更新

_index.js文件:

自我感觉是用来链接Action.js,Redux.js并导出到store.js文件的中枢纽带

import * as actions from './redux/Action.js';
import reducer from './redux/Reducer.js';

export { actions,reducer};

Action.js文件:

用来写数据的:数据的载体

import * as ActionTypes from './ActionTypes.js';

import axios from 'axios';

let _id = 0;
const obj = {
    "0":'未完成',
    "1":'已完成',
    "2":'进行中'
}
function cfgFn(){
    return {
        name:'小红',
        age:'32'
    }
}
const Data = {
    async getApi(ajaxCfg){
        let data = await axios.get(ajaxCfg.url,{params:ajaxCfg.cfg},
        {
            headers: ajaxCfg.headers
        })
        return data;
    }
}
export const AddTodo = (text,viewData,ajaxCfg,dispatch)=>{
    return{
        type:ActionTypes.ADD_TODO,
        text:text,
        id:_id ++,
        cfgFn:cfgFn(),
        viewData:viewData,
        getApi:Data.getApi(ajaxCfg).then((res)=>{
            dispatch({
                type:ActionTypes.EDIT_TODO,
                id:_id-1,
                data:res.data
            });
        })    }
}
export const Search = (text,value,searchCfg)=>{
    return {
        type:ActionTypes.SEARCH_BUTTON,
        text:text,
        value:value,
        searchCfg:searchCfg
    }
}
export const RemoveTodo = (id)=>{
    return {
        type:ActionTypes.REMOVE_TODO,
        id:id
    }
}

为什么要导入ActionType.js:

首先当action.type不拆分的话在组件中的actionType要对应到reducer里的actionType，并且一模一样

当你操作时type如果差一个字符是不会执行Reducer的action的且控制台不会报错。所以要把actionType拆分出来当做变量引入时，当你输入错误，控制台会报错。这时查找原因会非常容易。

首先先将actionType拆分出一个actionType.js文件来。然后在actionType里管理action.type.组件和reducer文件使用时可以引入。

为何要将action拆分出来呢

首先拆分出一个actionCreator.js文件统一管理组件创建的action。第一是为了好管理，第二前端的自动化测试时也会方便很多。

Reducer.js文件:

Action只是个数据的载体，用于告知Reducer发生了什么事情，真正搞事情的还得靠Reducer，在Reducer里更新Store里的state。

Reducer接收两个参数：旧的state和Action，返回一个新的state。即(state, action) => newState。有两个注意点：一是首次执行Redux时，你需要给state一个初始值。二是根据官网的说明，Reducer每次更新状态时需要一个新的state，因此不要直接修改旧的state参数，而是应该先将旧state参数复制一份，在副本上修改值，返回这个副本。

return { ...state, // 更新state中的值 };


import * as ActionTypes from './ActionTypes.js';

const reducer = (state=[],action)=>{
    switch(action.type){
        case ActionTypes.ADD_TODO :
            return [
                ...state,
                {
                    text:action.text,
                    id:action.id,
                    data:{}
                }
            ];
        case ActionTypes.REMOVE_TODO :
            return state.filter((todoItem) => {
                return todoItem.id !== action.id;
            });
        case ActionTypes.EDIT_TODO :
            return state;
        default:
            return state;
    }
}
export default reducer;

ActionType.js文件:

首先当action.type不拆分的话在组件中的actionType要对应到reducer里的actionType，并且一模一样

首先先将actionType拆分出一个actionType.js文件来。然后在actionType里管理action.type.组件和reducer文件使用时可以引入。

为何要将action拆分出来呢

首先拆分出一个actionCreator.js文件统一管理组件创建的action。第一是为了好管理，第二前端的自动化测试时也会方便很多。

对,这就是一个莫得感情的工具文件.对于Redure文件这是定位Action里面函数的,对于Action而言这是储存type值的

export const ADD_TODO = "ADD_TODO";
export const REMOVE_TODO = "REMOVE_TODO";
export const EDIT_TODO = "EDIT_TODO";
export const SEARCH_BUTTON = "SEARCH_BUTTON";