Redux的介绍

Redux是集中管理状态（数据）的，通过它可以实现跨组件通信，在任何组价中都可以拿到存储在里面的数据。

Action

Action就是一个对象，它里面有个type属性，值是字符串，它是用来标识我们要执行的操作，除了type外，其他属性由自己定义。

Reducer

Reducer就是一个函数，接受旧的state和action，返回新的state

（oldState，action）=> newState

Store

Store将action，state，reducer联系在一起。

她的作用：

维持应用的state
提供getState（）方法获取state
提供dispatch（action对象）方法更新state
通过subscribe（listener）监视state的变化，重新渲染组件

在react项目中使用redux

根据需求分析，我们需要在组件中拿到count，对这个数进行加减操作，那么这个值只有连个变化，加或者减

第一步：action对象确认｛type:’add’｝ {type:’ decrease’}

export add = ()=>({type:’add’})

export decrease= ()=>({type:’ decrease’})

第二步：根据旧的state和action对象进行加工，产生newState

//创建reducer

function count(oldState=0, action){

let {type} = action

//根据加或者减产生不同的newState

switch(type){

case ‘add’:

newState = oldState+1

return newState

case ‘decrease:

newState = oldState-1

return newState

default:

//初始化count

return oldState

}

另一个reducer

function xxx(){

return xxxxx

}

//多个reducer合并

import ｛combineReducers｝from ‘reudx’

export default combineReducers({

Count,

xxx

})

第三部：通过store建立联系

//引入createStore，创建Store

import ｛createStore｝ from ‘redux’

//根据reducer，创建store

import reducer from ‘./reducer’

export default createStore(reducer)

第四步：修改index.js文件

//引入store

emport store from ‘./redux/store.js’

//向App传入store

ReactDom.render(<App store = {store}/>,document.getElemetById(‘root’))

//监视state变化

store.subscribe(() => {

ReactDom.render(<App store={store} />, document.getElementById('root'));

})

第五步：在组件中使用

//App.js

//引入action创造函数

import {add decrease } from ‘./redux/action.js’

const ｛store｝= this.props //获得store对象

store.dispatch( add() ) //传入action对象去修改state

在react项目中使用react-redux

第四步：修改index.js

//引入react-redux

import {Provider} from 'react-redux'

ReactDom.render(

<App/>

</Provider>,

document.getElementById('root'));

第五步：组件中使用react-redux

//引入action创造函数

import {add ，decrease } from ‘./redux/action.js’

//引入connect，创建容器组件

import {connect} from ‘react-redux’

class Counter extends Component{

//获取state中的数据

this.props.count

//触发reducer

this.props.add()

}

//connect调用

export default connect(

//第一个参数

state => ({ count:state.count, xxxx:state.xxx })

//第二个参数

｛add，decrease｝

)（Counter）

在react项目中使用redux-thunk实现异步action

第一步：创建异步action

export add = ()=>({type:’add’})

export decrease= ()=>({type:’ decrease’})

//异步action

export addAsync = ()=>{

return (dispatch)=>{

setTimeout(()=>{

dispatch(add())

})

}

第三步：通过store建立联系

//引入createStore，创建Store

import ｛createStore，applyMiddleware｝ from ‘redux’

//根据reducer，创建store

import reducer from ‘./reducer’

//引入redux-thunk，处理异步action

import thunk from ‘redux-from’

export default createStore(reducer, applyMiddleware(thunk))

Redux的理解和项目中的使用