基础

• Array.prototype.reduce

//类似的核心思想

const initState = '';

const actions = ['a', 'b', 'c'];

const newState = actions.reduce(

    ( (prevState, action) => prevState + action ),

    initState

);

//action: actions;

//state: initState,newState;

//reducer: (prevState, action) => prevState + action //计算

Action

• 描述有什么事情发生了;

{

  type: 'ADD_TODO',

  text: 'Build Redux app'

}

• 改变State只能通过actions, 使用store.dispatch()。并且，每一个action都必须是Javascript Plain Object;
• 为保证状态保存、回放、Undo 之类的功能可以被实现, action必须是可以被序列化的因此,不能包含如函数调用这样的不可序列化字段;
• type是必须要有的字符串属性; 建议文档;
• 好的结构中应该每次action传需要的数据而不是整个

{

  type: SET_VISIBILITY_FILTER,

  filter: SHOW_COMPLETED

}

Action Creator

• 事实上,创建action对象更多地是通过一个创建函数;

function addTodo(text) {

  return {

    type: ADD_TODO,

    text

  };

}

//触发

dispatch(addTodo(text));

• dispatch可以直接来自store.dispatch;

handleClick() {

  // Works! (but you need to grab store somehow)

  store.dispatch(addTodo('Fix the issue'));

}`

• react-redux中可以通过connect(mapStateToProps,mapDispatchToProps)(Counter);
  • mapStateToProps函数通过返回一个映射对象selector,指定了 Store/State属性映射到React Component的this.props的情况;

class AddTodo extends Component {

  handleClick() {

    // Works!

    this.props.dispatch(addTodo('Fix the issue'));

  }

  ....

}

 //将dispatch和state放入props

export default connect(select)(AddTodo);

• 或者结合bindActionCreators(actionCreators, dispatch);

import * as CounterActions from '../actions/counter';

function mapStateToProps(state) {

  return {

    counter: state.counter

  };

}

function mapDispatchToProps(dispatch) {

  return bindActionCreators(CounterActions, dispatch);

}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);  //可以直接添加actionCreators

//调用

<button onClick={this.props.addTodo}/>add</button>

Reducers

• 描述事情发生后state如何改变;

更新成员

• 为了确保State的消费者在判断数据是否变化时，只要简单地进行引用比较避免Deep Equal的遍历,需要确保State中每个节点都是不可改变的;

• 在Reducer中更新State成员需要

• 增加

//对象

let counters = {

    faves: 0,

    forward: 20,

}

// this creates a brand new copy overwriting just that key

counters = {...counters, faves: counters.faves + 1}

//数组;  调换顺序，可以改变增加的位置;

let todos = [

    { id: 1, text: 'have lunch'}

]

todos = [...todos, { id: 2, text: 'buy a cup of coffee'} ]

• 删除

//数组

let users = [...];

users = users.filter(user=> user.id !== find.id)

• 由于更新数据的差异:如对于数组型react:state操作后,会同时更新操作位置之后的数据;而redux则只会更新操作位置的数据;

同步执行

• Reducer的执行是同步的;
• 在给定initState以及一系列的actions,都应该得到相同的newState;

分割reduce

• Reducer和action.type是多对多的关系;

export default function counter(state = 0, action) {

  switch (action.type) {

  case INCREMENT_COUNTER:

    return state + 1;

  case DECREMENT_COUNTER:

    return state - 1;

  default:

    return state;

  }

}

• 在程序变多时可以使用combineReducers({field1: reducerForField1,....})来管理
  • 每个reducerForField1将仅仅获得State.field1的值，而看不到State下的其他字段的内容;
  • 响应的返回结果也会被合并到对应的State字段中;

import { combineReducers } from 'redux';

const todoAppReducer = combineReducers({

  visibilityFilter: visibilityFilterReducer

  todos: todosReducer

});

//

visibilityFilterReducer 仅仅负责处理 State.visibilityFilter 字段的状态

• 注意使用combineReducers的前提是，每一个被组合的Reducer仅仅和State的一部分数据相关;
• 如果需要消费其他State字段，那还是需要在大switch中为特定处理函数传入整个State;

function todoAppReducer(state = initialState, action) {

  switch (action.type) {

  case FAVE_ALL_ITEMS:

    return Object.assign({}, state, faveThemAll(state));

  default:

    return state;

  }

}

Store

• 维护应用程序状态的对象;
• 构造Store对象，仅需要提供一个Reducer函数;

import { combineReducers, createStore } from 'redux';

import * as reducers from './reducers';

const todoAppReducer = combineReducers(reducers);

const store = createStore(todoAppReducer);  // Line 5

store.dispatch({type: 'ADD_TODO', text: 'Build Redux app'});

• 可以在createStore的时候为Store指定一个初始状态;

const store = createStore(reducers, window.STATE_FROM_SERVER);

方法

• store.getState(): 获取最近的内部状态对象;
• store.dispatch(action): 将一个action对象发送给reducer;
• store.subscribe(listener):订阅状态的变化;并不推荐使用, 可以搭配Observable模式的程序，react中不建议;

Provider Component

• 通过Provider Component来设定connect从哪里获得store对象;

React.render(

  <Provider store={store}>

    {() => <MyRootComponent />}   //react 0.14: <MyRootComponent />

  </Provider>,

  rootEl

);

主要流程

• 设置redecers,分片的话使用redux: combineReducers;
• 创建store,使用redux: createStore,传入reducers;
• 在特定的组件/顶层组件绑定状态和dispatch,使用react-redux: connet,传入状态映射selector;
• 将store关联到绑定后的特定/顶层组件,使用react-resuc: Provider;
• 设置actions，并在组件想要调用的地方触发this.props.dispatch(),自动更新state;

其他

• 在绑定组件时使用redux: bindActionCreators,connect传入第二参数,直接将dispatch(actions)传入组件ptops; //注意此时action则必须是Action Creator;
• 在创建store时使用redux: applyMiddleware先传入中间件，再创建

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import reducer from '../reducers';

const createStoreWithMiddleware = applyMiddleware(

  thunk

)(createStore);

export default function configureStore(initialState) {

  const store = createStoreWithMiddleware(reducer, initialState);

  return store;

}

//

const store = configureStore();