REDUX: 状态管理
flux ->
|- vuex // vue
|- react-redux // react
- 状态管理: 应用可以在同一个地方查询、改变、传播状态(简单来说就是数据的共用,懂~~~)
- 指导思想:顶层组件有个数据储存室(store),其他底层共享顶层组件的数据储存室
- 数据流动:component->action->reducer->state->component
- component: 展示结果(含结果处理代码)
- action: 动作转发,异步请求处理, dispath (出现在组件里面)
- reducer: 处理业务逻辑,不建议直接修改state,返回新state
- Object.assign(新对象,对象1,对象2) 一般使用此方法去给state添加新数据
- state: 状态收集、更新内部state状态,更新component
下面说一下具体实现
第一步:在组件外部定义 store
1.创建默认状态(一般const or let一个对象)
const defaultState={
arr:['qq','bmw7'],
};
2.创建 reducer 纯函数(函数必须有返回值)
let reducer=(state=defaultState,action)=>{
let {type,payload}=action;
switch (type){
case 'ADD_ITEM':
// state.arr.push(payload) //直接修改state
return Object.assign({},state,{
arr: state.arr.concat(payload)
});
break;
default:
return state;
}
};
3.实例化 store 对象
let store = createStore(reducer,defaultState);
第二步:在组件里面使用 store
1.订阅 store (一般在 componentDidMount 里来接受 store 数据)
this.props.store.subscribe(()=>{ //订阅store的状态
console.log('收到订阅了store的数据');
console.log(this.props.store.getState()); //state对象
this.setState({
arr:this.props.store.getState().arr
});
})
2.action(发布/更新)数据(一般为事件触发函数)
this.props.store.dispatch({
type:'ADD_ITEM',
payload:this.refs.t1.value
});
最后 —— 啦啦啦 O(∩_∩)O
有一个小巧而精致的小栗子(补全上面代码):
import React from 'react';
import ReactDom from 'react-dom';
import {createStore} from 'redux'; //解构一个createStore 创建状态对象
//默认状态 state
const defaultState={
arr:['qq','bmw7'],
};
//创建reducer 纯函数 ,必须要有返回值(state)
let reducer=(state=defaultState,action)=>{
let {type,payload}=action;
switch (type){
case 'ADD_ITEM':
// state.arr.push(payload) //直接修改state
return Object.assign({},state,{
arr: state.arr.concat(payload)
});
break;
default:
return state;
}
};
//创建store实例对象
let store = createStore(reducer,defaultState);
//创建ToDoList组件
class ToDoList extends React.Component{
constructor(){
super();
this.state={
arr:[]
};
this.add=this.add.bind(this);
}
componentDidMount(){
this.setState({
arr:this.props.store.getState().arr
});
//订阅store的状态
this.props.store.subscribe(()=>{
console.log('收到订阅了store的数据');
console.log(this.props.store.getState());//state对象
this.setState({
arr:this.props.store.getState().arr
});
})
}
add(){
// action 发布状态
this.props.store.dispatch({
type:'ADD_ITEM',
payload:this.refs.t1.value
});
}
render(){
return (
<div title="ToDoList">
<input type="text" ref="t1"/>
<input type="button" value="提交" onClick={this.add}/>
<ul>
{
this.state.arr.map(function(val,index){
return <li key={index}>{val}</li>
})
}
</ul>
</div>
);
}
}
ReactDom.render(
<ToDoList store={store}></ToDoList>,
document.querySelector('#app')
);
下一篇文章将会聊一聊 redux 针对 react 的一个封装 react-redux,使用的方法与 redux 差不多。