Redux的理解和项目中的使用
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( <Provider store={store}> <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)) |