react + redux 笔记

** Redux是个状态容器，只能通过发起action改变state，这种集中管控的做法让状态管理和预测变的简单。组件只是state的展现形式而已！React只是一个界面库而已！**

先考虑Redux是怎么运作的：首先store中维护了一个state，我们dispatch一个action，接下来reducer根据这个action更新state。

映射到我们的React应用中，store中维护的state就是我们的app state，一个React组件作为View层，做两件事：render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render，并包装action creator用于在响应用户操作时dispatch一个action。

Provider

provider 是 react-redux 提供的组件，用来把 store 和视图绑定在一起

<Provider store={store}>
    <App />
</Provider>

<Provider store={store} key="provider"> 
    <Router history={history} routes={routes} />  //使用路由
</Provider>

Store

store 即唯一的 state tree , store 会根据 reducer 进行初始化，每当被调用的时候都会返回一个新的 state

Reducer

redux 通过 reducers 来负责管理整个应用的State树，而 reducers 可以被分成一个个 reducer

const initialItems = Immutable.List([1,2,3]);
 
export default function items(state = initialItems, action) {
    switch(action.type) {
        case ADD_ITEM:
            return state.push( state.size !=0 ? state.get(-1)+1 : 1 );
        case DELETE_ITEM:
            return state.delete( state.indexOf(action.item) );
        case DELETE_ALL:
            return state.clear();
        default:
            return state;
    }
}

redux 提供的 combineReducers 函数可以帮助我们把 reducer 组合在一起，这样我们就可以把 reducers 拆分成一个个小的 reducer 来管理 store了

import { combineReducers } from 'redux';
import items from './items';
import filter from './filter';
 
const rootReducer = combineReducers({
  items,
  filter
});
 
export default rootReducer;

Action

actionType

export const ADD_ITEM = 'ADD_ITEM';
export const DELETE_ITEM = 'DELETE_ITEM';
export const DELETE_ALL = 'DELETE_ALL';
export const FILTER_ITEM = 'FILTER_ITEM';

action

export function deleteItem(item, e) {
    return {
       type: DELETE_ITEM,
       item
    }
}
export function deleteAll() {
    return {
       type: DELETE_ALL
    }
}

Dispatch

执行action

import Store from 'store';

Store.dispatch({
  type: "ARRANGE_VIEWING",
  data: {
    model: "Model S",
    id: "123"
  }
});