redux

使用步骤

image.png

redux只处理同步

redux处理异步请求中间件·

image.png
import thunk from 'redux-thunk'

在引入redux的时候引入applyMiddleware

import {createStore,applyMiddleware} from 'redux'

使用applyMiddleware开启thunk中间件

const store = createStore(counter,applyMiddleware(thunk))

action返回函数在异步请求完成时调用调用

export function addAsync(){
　return fun=>{
　　setTimeout(()=>{
　　　fun(ADD())
　　 },2000)
　  }
}

合并多个reducer

reducer.js

import {combineReducers} from 'redux'
import {Auth} from './login-redux'
import {counter} from './index.redux'

export default combineReducers({Auth,counter})

inidx.js

import reducers from './reducer'
const store = createStore(reducers,compose(applyMiddleware(thunk),reduxDevtools))

在新文件中引入多个reducer和combineReducers方法并调用传参
然后在creatStore的时候将reducer传入这样就只需要creatStore一次

redux Chrome扩展程序

image.png
该插件的github https://github.com/zalmoxisus/redux-devtools-extension#usage seller.gif

想要像上图一样在浏览器中浏览redux的状态变化还需要配置如下代码
这个插件暴露在window上一个devToolsExtension方法，所以需要写一个能力检测如果有就调用

var reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : () => {}
const store = createStore(counter,reduxDevtools)