您的位置:首页 > Web前端 > React

React项目便捷使用Redux管理状态

2019-07-15 11:35 1266 查看

最近公司里碰到需要使用redux解决公共状态的问题,查看了一下资料,来分享一下:

什么时候需要Redux?

当你遇到以下场景时,就可以引入redux了:

  1. 某个组件的状态,需要共享
  2. 某个状态需要在任何地方都可以拿到
  3. 一个组件需要改变全局状态
  4. 一个组件需要改变另一个组件的状态

如何引入Redux?

npm install redux --save

简易使用Redux

  1. 在项目文件下src中创建store文件夹,并在其中新建index.js文件
import { createStore } from 'redux'
import reducer from './reducer';
const store = createStore(reducer);

export default store;
  1. 在store文件夹下再新建reducer.js文件
const defaultState = {
visible: false,
List: []
}
export default (state = defaultState, action) => {
if (action.type === 'open_it') {
const newState = JSON.parse(JSON.stringify(state));
newState.visible = action.value;
return newState
}
return state;
}
  1. 在需要引入store中的数据或者改变store中数据的地方引入
import store from './../store'

获取store中的state,并订阅store中的数据变化

constructor (props) {
super(props)
this.state = store.getState();
this.handleStoreChange = this.handleStoreChange.bind(this);
store.subscribe(this.handleStoreChange)
}
handleStoreChange(){
this.setState(store.getState());
}

dispatch执行action

store.dispatch({
type: 'open_it',
value: true
});

Redux具体是什么,有什么高级使用?

这一块还是推荐大家看Redux官方文档以及阮一峰的redux相关博客

如果简单使用上面的例子就足够了

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: