我比较菜,有大佬可以补充一下,指出错误
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函数获取里面所导入的内容了
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')获取数据源并为此声明的作用.
const mapDispatchToProps = (dispatch, ownProps) => {
return {
//onAddFn为自定义
onAddFn: (text,viewDate,ajaxCfg) => dispatch(actions.AddTodo(text,vie wDate,ajaxCfg,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的更新
自我感觉是用来链接Action.js,Redux.js并导出到store.js文件的中枢纽带
import * as actions from './redux/Action.js';
import reducer from './redux/Reducer.js';
export { actions,reducer};
用来写数据的:数据的载体
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。第一是为了好管理, 第二前端的自动化测试时也会方便很多。
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;
首先当action.type不拆分的话在组件中的actionType要对应到reducer里的actionType,并且一模一样
当你操作时type如果差一个字符是不会执行Reducer的action的 且控制台不会报错。所以要把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";