redux学习总结

redux学习总结

redux学习总结

主要是学习完，为了加深印象，整理的一些概念和总结，主要是参考阮大师的文章。

一些类包总结

• redux，redux自己的包，自己专有的功能。有createStore、applyMiddleware、combineReducers
• redux-actions, 与actions相关，handleActions（reducer使用）、createAction（action使用）
• react-redux，将react工程变成redux,链接使用。有provide、connect

redux、redux-actions类

store

• 所有的入口，整个应用只有一个store,在入口的index.jsx中通过<Provider store={store}>引入。因为provider,是链接react和redux的，所有import { Provider } from 'react-redux';
• 如何创建一个store？import {createStore,applyMiddleware} from 'redux'。createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。
• store.dispatch()是 View 发出 Action 的唯一方法。
• store对象包含的数据，叫state,如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

• dispactch，支持异步请求。

  import {createStore,applyMiddleware} from 'redux'
  import thunkMiddleware from 'redux-thunk'
  const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

  上面代码使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。
  因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。

action

• State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。 Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。

• 创建一个action,简化做法是createAction

  import { createAction } from 'redux-actions';
  import * as types from '../constants/ActionTypes';
  const test = createAction(types.TEST);

Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

• reducer函数不能手工调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

import { createStore } from 'redux';
const store = createStore(reducer);

createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。

let store = createStore(reducer, window.STATE_FROM_SERVER)

上面代码中，window.STATEFROMSERVER就是整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值。

• state初始化值在reducer里面设置。最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。

function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // 或者
  return { ...state, ...newState };
}

// State 是一个数组
function reducer(state, action) {
  return [...state, newItem];
}

• reducer其实就是执行action,然后给出新的state。于是有handleActions 。可以简化处理。import { handleActions } from 'redux-actions';

import * as types from '../constants/ActionTypes';

const initialState = {
  };

export default handleActions({

  [types.SELECT_LUGGAGE] (state,action){

      return {
        ...state
    }

  },
  [types.SELECTED_LUGGAGE] (state,action){
    var index = action.payload;
     
    return {
      ...state
    }

  }
},initialState);

• reducer需要拆分，不同的函数负责处理不同属性，最终把它们合并成一个大的 Reducer 即可。import { combineReducers } from 'redux';

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

export default todoApp;

上面的代码通过combineReducers方法将三个子 Reducer 合并成一个大的函数。
这种写法有一个前提，就是 State 的属性名必须与子 Reducer 同名

react-redux类

组件

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
你可能会问，如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。
React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

容器组件

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。
~~~
import { connect } from 'react-redux'

const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
~~~
上面代码中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。