Redux学习篇:一个全局的加减法示例对redux的认识

一个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> &nbsp; 
    <button onClick={dec(2)}>点击减去2</button>
    </>
  )
}