React--redux基础

u=118989993,844966336&fm=27&gp=0.jpg

Redux的三大原则

Redux 可以用这三个基本原则来描述：

单一数据源

整个应用的 state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store中。

State 是只读的

惟一改变 state 的方法就是触发action ，action是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务。

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。

const ADD_TODO = 'ADD_TODO'
const action = {
  type: ADD_TODO,
  payload: 'this is add_todo'
};

上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串this is add_todo。
action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

Action 创建函数

Action 创建函数 就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。

在 Redux 中的 action 创建函数只是简单的返回一个 action:

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

使用：

dispatch(addTodo(text))
或者
const boundAddTodo = (text) => dispatch(addTodo(text))

Reducer

Action 只是描述了有事情发生了这一事实，并没有指明应用如何更新 state。而这正是 reducer 要做的事情。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

不要修改 state。 使用 Object.assign()新建了一个副本。不能这样使用 Object.assign({，}state, {visibilityFilter: action.filter })
，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。
在 default情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。
store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

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

上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。

Store

Store 就是把action、reducer联系到一起的对象。Store 有以下职责：
维持应用的 state；
提供 getState()方法获取 state；
提供 dispatch(action)方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener)返回的函数注销监听器;
再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。
创建store

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

createStore()的第二个参数是可选的, 用于设置 state 初始状态。这对开发同构应用时非常有用，服务器端 redux 应用的 state 结构可以与客户端保持一致, 那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。

let store = createStore(todoApp, window.STATE_FROM_SERVER)

发起 Actions
store.dispatch()是 View 发出 Action 的唯一方法。

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

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

结合 Action Creator，这段代码可以改写如下。

store.dispatch(addTodo('Learn Redux'));

store.subscribe()
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

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

store.subscribe(listener);

Redux API

combineReducers
随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state的一部分。
combineReducers辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用createStore
例如：

import {combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux'

import home  from './home';
import quiz     from './quiz';
import article from './article';
import people from './people';

export default combineReducers({
    home,
    quiz,
    article,
    people,
    routing: routerReducer
})

bindActionCreators
把 action creators转成拥有同名 keys 的对象，但使用 dispatch把每个 action creator 包围起来，这样可以直接调用它们。
惟一使用 bindActionCreators的场景是当你需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 Redux store 或 dispatch传给它。

bindActionCreators(actionCreators, dispatch)

actionCreators : 一个 action creator，或者键值是 action creators 的对象.
dispatch : 一个 dispatch函数，由 Store实例提供.
返回值： 一个与原对象类似的对象，只不过这个对象中的的每个函数值都可以直接 dispatch action。如果传入的是一个函数，返回的也是一个函数。
mapDispatchToProps
用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。
如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。

function mapDispatchToProps (dispatch) {
    return bindActionCreators(actions.default, dispatch);
}

connect
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

connect(state => state, mapDispatchToProps)(App)

上面代码中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
这对router4，写了一个例子：
关于acton

actions

其中index.js如下

import * as loginActions from './login';
import * as homeActions from './home';
import * as articleActions from './article';
import * as quizActions from './quiz';
import * as topicActions from './topic';
import * as peopleActions from './people';
import * as artActions from './art';
import * as quizDetailActions from './quizDetail';

export default {
    ...loginActions,
    ...homeActions,
    ...articleActions,
    ...quizActions,
    ...topicActions,
    ...peopleActions,
    ...artActions,
    ...quizDetailActions
}

然后对action处理
在顶级组件里app.js

import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import * as actions from '../actions'
.
.
.
function mapDispatchToProps (dispatch) {
    return bindActionCreators(actions.default, dispatch);
}

export default connect(state => state, mapDispatchToProps)(App);

对reduce进行处理

reduce

import {combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux'
import login from './login';
import home  from './home';
import article  from './article';
import quiz  from './quiz';
import topic  from './topic';
import people  from './people';
import art  from './art';
import quizDetail  from './quizDetail';

export default combineReducers({
    login,
    home,
    article,
    quiz,
    topic,
    people,
    art,
    quizDetail,
    routing: routerReducer
})

main.js

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Router, match, browserHistory, hashHistory} from 'react-router';
import {createLocation} from 'history';
import {syncHistoryWithStore} from 'react-router-redux';
import routes from '../route/routes';
import configureStore from '../store';

import '../common/index.less';

const store = configureStore(browserHistory);

const history = syncHistoryWithStore(browserHistory, store);

render(
    <Provider store={store}>
        <Router history={history} routes={routes} ></Router>
    </Provider>,
    document.getElementById('app')
)

store/index.js

import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import rootReducer from '../reduces'

const createStoreWithMiddleware = compose(
    applyMiddleware(thunk, createLogger())
)(createStore)

export default initialState => createStoreWithMiddleware(rootReducer, initialState)

store里面牵扯的其他api ，我们下节再讲。

参考文档：
Redux中文文档