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 創建狀態對象
//默認狀態 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 差不多。