react中使用redux的combineReducersh合并reducer编写异步Action任务

1. import { combineReducers } from 'redux'
   import countReducer from './modules/count'
   export const IndexReducers =combineReducers({ countReducer })

   2.同步Action

   export const increment = value => ({ type: INCREMENT, value })
   export const decement = value => ({ type: DECAMENT, value })

    

2. 异步Action:

   我在使用redux过程中遇到Actions must be plain objects. Use custom middleware for async actions.异常的分析
   //异步Action任务
   export const AsyncIncremnet=(data,time)=>{
       return ()=>{
           setTimeout(()=>{
               Store.dispatch(increment(10))
           },time)
      }
   }
   //redux不支持传递函数的Action如果必必须那就加上redux-thunk来实现
   

   完整redux

3. import { INCREMENT, DECAMENT } from "../reducers";
   
   //无法使{}直接加上()//这是同步Action
   export const increment = value => ({ type: INCREMENT, value })
   export const decement = value => ({ type: DECAMENT, value })
   //异步Action任务
   export const AsyncIncremnet=(data,time)=>{
       //这是中间件传递过来的dispath
       return (dispatch)=>{
           console.log(dispatch)
           setTimeout(()=>{
               dispatch(increment(10))
           },time)
      }
   }
       
   
   
   const defaultState = {
       count: 0
   }
   export const INCREMENT = 'increment'
   export default (preState = defaultState, action) => {
       const { type, value } = action
       switch (type) {
           case INCREMENT:
               console.log({ ...preState, count: preState.count += value })
               return { ...preState, count: preState.count += value };
           default:
               return { ...preState }
       }
   }
   
   
   import { combineReducers } from 'redux'
   import countReducer from './modules/count'
   export const IndexReducers =combineReducers({ countReducer })
   //当时为了方便直接写在这里
   export const INCREMENT = 'increment'
   export const DECAMENT='delete'
   
   
   
   import {createStore,applyMiddleware} from 'redux'
   import {IndexReducers} from '../reducers/index.js'
   import ReduxThunk from 'redux-thunk'
   export const  Store=createStore(IndexReducers,applyMiddleware(ReduxThunk))
   
   
   
   import React, { Component } from 'react'
   
   import './App.css';
   import { Store } from './store/store.js'
   import { INCREMENT } from './reducers/index' 
   import {increment,decement,AsyncIncremnet} from './actions/count'
   export default class App extends Component {
     state = {...Store.getState().countReducer};
     componentDidMount() {
       Store.subscribe(() => {
         this.setState(Store.getState().countReducer);      
       })
     }
     decement=()=>{
       decement(10)
     };
     increment=()=>{
       increment(10)
     }
     
     render() {
       console.log(this.state)
       const { count } = this.state;
       return (
         <div>t
           APP...
           { count}
           <button onClick={()=>{Store.dispatch(AsyncIncremnet(10,500))}}>Async点击INCremet</button>
           <button onClick={()=>{Store.dispatch(increment(10))}}>点击INCremet</button>
           <button onClick={()=>Store.dispatch(decement(10))}>点击INCremet</button>
         </div>
       )
   
     }
   }
   
   
   // export default App;