四个东西

  1. store

一个存放应用所有状态的地方

  1. state
    应用的状态, 整体是个对象, 像这样 
1
2
3
4
5
6
7
8
9
10
{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}
  1. action

一个用于描述发生了某件事的对象, 像这样

1
{type:'type', id:1...}
  1. reducer
    用于描述一个事件发生后状态应该如何改变, 是一个纯函数. 根据action的type和参数得到新的state并return
1
2
3
reducer(state, action) {
  return newState;
}

关于这几个的理解

  • 几个方法

  1. combineReducers 将多个reducer函数合起来, 便于createStrore使用

  2. createStore(reducer, [preloadedState], enhancer) 创建store

  3. Store 方法

  • getState()
  • dispatch(action)
  • subscribe(listener)
  • replaceReducer(nextReducer)
  1. applyMiddleware

react-redux

  1. 容器组件与视图组件

  2. connect

    1
    2
    3
    4
    5
    6
    7

    import { connect } from 'react-redux'

    const VisibleTodoList = connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoList)
  • mapStateToProps
1
2
3
4
5
const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}`
  • mapDispatchToProps
1
2
3
4
5
6
7
8
9
10
11
12
13
const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}