redux understand

All application state are stored in a single store in the form of an object tree. The only way is to change the state trigger action (action is a description of what happened objects), in order to describe how action to change the state tree, you need to write reducers.
Redux

import { createStore } from 'redux';

/**
 * 这是一个 reducer,形式为 (state, action) => state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 *
 * state 的形式取决于你,可以是基本类型、数组、对象、
 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
 * 当 state 变化时需要返回全新的对象,而不是修改传入的参数。
 *
 * 下面例子使用 `switch` 语句和字符串来做判断,但你可以写帮助类(helper)
 * 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手动订阅更新,也可以事件绑定到视图层。
store.subscribe(() =>
  console.log(store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化,用日记记录和储存下来,后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

Figure shows:

  1. store is a store all the state of the object, in order to make data changes state, you need to initiate an action, action is just an ordinary object, but he used to describe what happened.
    Case example action: {type: 'ADD_TODO', text: 'Go to swimming pool'}
    dialect is: type determination operation performed in which data reducers, text value is reached inside. An object description we want to state what kind of modifications do. By dispatch sent, reducer will be able to get this object

2. In order to string together the action and the state, the development of some function, which is reducer. Again, there is no magic, reducer just a receiving state and action, and returns the new functions of the state.

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

Two: the three principles

  1. State the entire application is stored in an object tree in the object tree and exists only in a single store.
    Description: direct output console.log (store.getState ())
  2. state is read-only, the only way is to change the state trigger action, action is a normal object describing an event has occurred.
    3. Use a pure function to perform modifications, in order to describe how action to change the state tree, you need to write reducers.

Redux life cycle of the application data follow the following four steps:
1. Call store.dispatch (action).
Action is a general description of the object "what happened." For example: {type: 'LIKE_ARTICLE', articleId: 42}

2.Redux store incoming calls reducer function.
Store will pass two parameters reducer: the current state tree and action.

3. The plurality of sub-root reducer reducer should be combined into a single output state tree.
Root reducer structure is entirely up to you. Redux native in combineReducers () function auxiliary to the root reducer into multiple functions, each process state for a branch of the tree.

4.Redux store preserves a complete state tree root reducer returned.
The next state of this new tree is applied! All subscriptions store.subscribe (listener) listener will be invoked; listeners can call in store.getState () to get the current state.

Concluded: that all are in store in the state, action by dispatch (action) and the previousState action pass reducers, reducer describe how the different action to change the state, newState return to store. Finally, to be taken from the store

Released seven original articles · won praise 1 · views 1319

Guess you like

Origin blog.csdn.net/lydia_love/article/details/104353605