redux 中的同步action和异步action

首先区别redux和react-reduex,redux是一个单独的模块，在其他框架中也能使用，而react-redux是为react管理数据而生。 Redux 的设计思想很简单，就两句话。

（1）Web 应用是一个状态机，视图与状态是一一对应的。

（2）所有的状态，保存在一个对象里面。

redux使用：首先安装 npm i redux 在src文件目录下新建一个文件夹叫redux，文件夹中新建四个文件

constant.js 用于存储action对象中的type类型常量，目的只有一个;方便管理的同时防止程序员单词写错,

例如：

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

action.js 该文件专门为组件生成action对象

import {INCREMENT,DECREMENT} from './constant'
​
//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})
//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time)=>{
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncrementAction(data))
        },time)
    }
}

 

reducer.js

/* 
    1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
    2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
​
const initState = 10 //初始化状态
export default function countReducer(preState=initState,action){
​
    console.log(preState,action);
    //从action对象中获取：type、data
    const {type,data} = action
    //根据type决定如何加工数据
    switch (type) {
        case 'increment': //如果是加
            return preState + data
        case 'decrement': //若果是减
            return preState - data
        default:
            return preState
    }
}

 

store.js 该文件专门用于暴露一个store对象，整个应用只有一个store对象 要下载 npm i redux-thunk --save

//引入createStore，专门用于创建redux中最为核心的store对象,引入applyMiddleware中间件转发
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducer'
// 引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk';
//暴露store
export default createStore(countReducer,applyMiddleware(thunk));

 

最后在index.js文件中引入store并设置监听

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
​
ReactDOM.render(<App />,document.getElementById('root'))
​
store.subscribe(()=>{ //设置监听，只要state改变数据页面就会更新
    ReactDOM.render(<App/>,document.getElementById('root'))
})

 

如果在哪个组件中使用就在组件中引入store，

// 引入store，用于获取redux中保存状态
import store from '../../redux/store'
// 操作异步数据 引入相应的action函数
import {createIncrementAsyncAction} from '../../redux/action'
​
​
 increment = ()=>{ //同步函数的调用
       const {value} = this.selectNumber
       store.dispatch({type:'increment',data:value*1})
    }
 incrementAsync = ()=> {//异步函数的调用
       const {value} = this.selectNumber;
        store.dispatch(createIncrementAsyncAction(value*1,500))
    }
  
    <h1>当前求和为：{store.getState()}</h1>//获取store中的返回值