React开发实时聊天招聘工具 -第四章 Redux

复杂以后 setState 就不太方便了

所以使用Redux来管理 React只负责View。

Store、State、Dispatch、Reducer

reducer(state,action)

{

switch(action.type){

case ...

... ...

return newAction;

}

}

·通过Reducer创建Store

·Store.dispatch（action）来修改状态

·Reducer函数接受state和action，返回新的state，可用store.subscribe监听每次修改

function listener() {

const current = store.getState()

console.log(current);

}

store.subscribe(listener)

store.dispatch({ type: '...' })

store.dispatch({ type: '...' })

 

 

 

二、Redux配合React使用

 

index.js:

const store = createStore(reducer)

<App store={store}/>

 

App.js:

 

render(){

const num = this.props.store

return({num})

}

 

三、Redux处理异步

 

import thunk from 'redux-thunk'

 

import { createStore, applyMiddleware } from 'redux'

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

 

//需要提交action的地方用dispatch执行一下

Action(){

     return  dispatch=>{

 

          setTimeout(()=>{

               dispatch({type:'ADD_GUN'})

          },2000)

 

     }

}

 

store.dispatch(Action())

 

四、调试工具

Chrome中的redux dev tool插件

 

import { createStore, applyMiddleware, compose } from 'redux'

 

const store = createStore(counter, compose(

applyMiddleware(thunk),

window.devToolsExtension ? window.devToolsExtension() : null

))

 

五、使用react-redux

 

//从现在开始忘记store.subscribe

 

Provider 和 Connect接口

 

·Provider放在组件最外层，传入store即可，只用一次

import { Provider } from 'react-redux'

 

<Provider store={store}>

 <App />

</Provider>

 

在app.js中:

 

import { connect } from 'react-redux'

 

const mapStatetoProp = (state) => {

return { num: state }

}

 

const actionCreators = { addGUN, removeGUN, addGUNAsync }

 

//装饰器

App = connect(mapStatetoProp, actionCreators)(App)

 

然后,

<button onClick={addGUN}>申请武器</button>

//不需要store.dispatch(addGUN())了  

注:addGUN是一个action creator

 

 

mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

mapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象。

装饰器

 

@connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

 

mapStateToProps(state, ownProps) : stateProps

这个函数允许我们将 store 中的数据作为 props 绑定到组件上。

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二个参数是 mapDispatchToProps，它的功能是，将 action 作为 props 绑定到组件上，也会成为 MyComp 的 props。

 

总结

connect内第一个是state属性

第二个是你要什么方法

Prover放在最外面store传到属性中

 

 

六、React-router4

·BrowserRouter包裹整个应用

·Router路由对应渲染的组件，可嵌套

·Link跳转专用

·Switch

·Redirect