手机网站特效/营销公司排行
一个react只有一个全局的store对象
action只是说明要做的事情
reducer是具体做的事情
react项目会由很多的reducer和action
Reducer是一个函数，他接受当前的state和action，返回新的state
combineReducers可以将多个reducer合并成一个,任何传给createStore
action返回一个对象,必须存在type属性,其他的属性可自定定义
代码展示
在src新建目录Action,Reducer,Store
src\Action\index.js
const addAction = (payload) => {return {type: 'ADD_TYPE',payload: payload}
}
const decAction = (payload) => {return {type: 'DEC_TYPE',payload:payload}
}export {addAction,decAction
}
src\Reducer\index.js
import {combineReducers} from 'redux';
let initState = 0;const addreducer = (state = initState, action) => {console.log('reduce函数', state, action);switch (action.type) {case 'ADD_TYPE':return state = state + action.payload;default:return state;}
}const decreducer = (state = initState, {type, payload = 0}) => {switch(type){case 'DEC_TYPE':return state = state - payload;default:return state;}
}// 将多个reducer合并
const reducer = combineReducers({addreducer,decreducer
})
export default reducer;
src\Store\index.js
import {createStore } from 'redux';
// 导入reducer
import reducer from '../Reducer/index';
// 创建store
const store = createStore(reducer);export default store;
组件中使用
import React, {useEffect} from 'react';
import store from '../../Store/index';
import {addAction, decAction} from '../../Action';export default function Three(props:any){const add = (payload:number) => {return () => {const actionAdd = addAction(payload);store.dispatch(actionAdd)console.log('DEAL',store.getState());}}const dec = (payload:number) => {return () => {const actionDec = decAction(payload);store.dispatch(actionDec);console.log('DEAL',store.getState());}}useEffect(() => {},[])return(<><h2>这是Ⅲ页</h2><button onClick={add(4)}>点击添加4</button> <button onClick={dec(2)}>点击减去2</button></>)
}
