浅谈redux

一、来由

redux是flux的“进化版”，比flux更好上手，容易理解。

二、安装(npm)

npm install redux
npm install react-redux

Chrome浏览器插件安装：
更多工具-->扩展程序-->谷歌网上应用商店-->搜索 Reduex DevTools
安装后重启浏览器

三、Redux Flow

redux-flow.jpg

redux-flow看作是图书馆借书流程，
components看作借书的人，
action看作借书人的嘴😏，
store看作管理员，
reducer看作记录图书的本子。

举例demo：输入框输入内容，点击提交添加到list列表。

1.输入

• components：触发onChange事件,发出有数据改变意向

constructor(props){
    super(props);
    this.state = store.getState();
    this.handelChange = this.handelChange.bind(this);
  }
<input value={this.state.inputValue} onChange={this.handelChange} type="text"/>

• action：接收到改变的数据通过dispatch告诉store

handelChange(e){
   const action = {
      type:"input_todo_change",
      value:e.target.value
    }
    store.dispatch(action);
  }

store：拿着旧的state和action到reducer查阅

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

reducer：用store带来的action查阅state，做出相应的改变，return新的state告诉store。

const defaultState = {
  inputValue:"",
  list:[]
};
export default function(state=defaultState ,action){
  if(action.type === "input_todo_change"){
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }
}

subscribe：在component中通过store.subscribe()告知组件state发生了改变

this.handelStoreChange = this.handelStoreChange.bind(this);
store.subscribe(this.handelStoreChange);
 handelStoreChange(){
    this.setState(store.getState());
  }

2.提交

• components：触发onClick事件,发出有数据改变意向

constructor(props){
    super(props);
    this.state = store.getState();
    this.handelAddItem = this.handelAddItem.bind(this);
  }
<button onClick={this.handelAddItem}>提交</button>

• action：接收到要做的操作通过dispatch告诉store

handelAddItem(){
    const action = {
      type:"add_item"
    }
    store.dispatch(action);
  }

store：拿着旧的state和action到reducer查阅

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

reducer：用store带来的action查阅state，做出相应的改变，return新的state告诉store。

const defaultState = {
  inputValue:"",
  list:[]
};
export default function(state=defaultState ,action){
  if(action.type === "add_item"){
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.push(newState.inputValue);
    newState.inputValue = "";
    return newState;
  }
}

subscribe：在component中通过store.subscribe()告知组件state发生了改变

store.subscribe(this.handelStoreChange);
 handelStoreChange(){
    this.setState(store.getState());
  }

四、提取actionType和action，统一管理

actionType.js：
export const INPUT_TODO_CHANGE='input_todo_change';
export const ADD_ITEM='add_item';

reducer.js:
import {INPUT_TODO_CHANGE, ADD_ITEM, DELETE_ITEM} from './action-type';
const defaultState = {
  inputValue:"",
  list:[]
};
export default function(state=defaultState ,action){
  console.log(action)
  if(action.type === INPUT_TODO_CHANGE){
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }
  if(action.type === ADD_ITEM){
    const newState = JSON.parse(JSON.stringify(state));
    newState.list.push(newState.inputValue);
    newState.inputValue = "";
    return newState;
  }
  return state;
}

action.js
import {INPUT_TODO_CHANGE, ADD_ITEM, DELETE_ITEM} from './action-type';
export const getInputTodoChangeAction =  (value) => ({
  type:INPUT_TODO_CHANGE,
  value
})
export const getAddItemAction =  () => ({
  type:ADD_ITEM
})

conponent:
import  {getInputTodoChangeAction, getAddItemAction, getDeleteAction} from './stores/actions';
handelChange(e){
    const action = getInputTodoChangeAction(e.target.value);
    store.dispatch(action);
  }
handelAddItem(e){
    const action = getAddItemAction();
    store.dispatch(action);
  }