React ---- 状态管理之Redux

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 创建状态对象//默认状态 stateconst 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 差不多。