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。