ReactJS学习系列课程（React Redux使用）

React 数据流动的模式的Flux模式，也就是单向数据流，这也是官方推荐的方式，其实这也是React最难理解的一部分。

为了更好的了解React-redux的使用，我们先来了解一下Redux的使用。现在大家查一下这个单词的发音吧，因为我们第一次接触，避免以后读错误了。

Redux 介绍

对于复杂的单页面应用，状态（state）管理非常重要。state 可能包括：服务端的响应数据、本地对响应数据的缓存、本地创建的数据（比如，表单数据）以及一些 UI 的状态信息（比如，路由、选中的 tab、是否显示下拉列表、页码控制等等）。如果 state 变化不可预测，就会难于调试（state 不易重现，很难复现一些 bug）和不易于扩展（比如，优化更新渲染、服务端渲染、路由切换时获取数据等等）。

Redux 就是用来确保 state 变化的可预测性，主要的约束有：

state 以单一对象存储在 store 对象中
state 只读
使用纯函数 reducer 执行 state 更新
state 为单一对象，使得 Redux 只需要维护一棵状态树，服务端很容易初始化状态，易于服务器渲染。
state 只能通过 dispatch(action) 来触发更新，更新逻辑由 reducer 来执行。

Actions、Reducers 和 Store介绍

action 可以理解为应用向 store 传递的数据信息（一般为用户交互信息）。在实际应用中，传递的信息可以约定一个固定的数据格式。

为了便于测试和易于扩展，Redux 引入了 Action Creator:

export function addTodo(text) {
  return { type: types.ADD_TODO,text };
}

export function deleteTodo(id) {
  return { type: types.DELETE_TODO,id };
}

export function editTodo(id,text) {
  return { type: types.EDIT_TODO,id,text };
}

export function completeTodo(id) {
  return { type: types.COMPLETE_TODO,id };
}

reducer 实际上就是一个函数：(prevIoUsState,action) => newState。用来执行根据指定 action 来更新 state 的逻辑。通过 combineReducers(reducers) 可以把多个 reducer 合并成一个 root reducer。

store 是一个单一对象：

管理应用的 state
通过 store.getState() 可以获取 state
通过 store.dispatch(action) 来触发 state 更新
通过 store.subscribe(listener) 来注册 state 变化监听器
通过 createStore(reducer,[initialState]) 创建

Redux 和传统Flux的比较

图来自 UNIDIRECTIONAL USER INTERFACE ARCHITECTURES

React 和Redux

Redux 和 React 是没有必然关系的，Redux 用于管理 state，与具体的 View 框架无关。不过，Redux 特别适合那些 state => UI 的框架（比如：React,Deku）。

可以使用 react-redux 来绑定 React，react-redux 绑定的组件我们一般称之为 smart components.

react-redux的使用

下面我们用一个简单的例子，来说明react-redux在react项目中的只用，主要功能为计数功能，一个增加，一个减少，下面我们看下代码：

导入所需要的核心库：

import React,{ PropTypes } from 'react';
import ReactDOM from 'react-dom';
import {bindActionCreators,combineReducers,createStore} from 'redux';
import {Provider,connect} from 'react-redux';

创建一个组件：

// React Component
class Counter extends React.Component {
    render () {
        const {value,onIncreaseClick,onDecreaseClick} = this.props;

        console.log(this.props)

        return (
            <div>
                <span>{value}</span>
                <button onClick={onIncreaseClick}>click+</button>
                  <button onClick={onDecreaseClick}>click-</button>
            </div>
        )
    }
}

Counter.propTypes = {
    value: PropTypes.number.isrequired,onIncreaseClick: PropTypes.func.isrequired,onDecreaseClick: PropTypes.func.isrequired
};

创建两个action:

// Action
const increaseAction = {type: 'increase'};

const decreaseAction = {type: 'decrease'};

创建一个reducer:

// Reducer
function count (state = 0,action) {

    switch (action.type) {
        case 'increase':
            return state + 1;
        case 'decrease':
            return state - 1;
        default:
            return state
    }
}

组合reducer并创建一个store:

let todoApp = combineReducers({
  count,count2
});

// Store
let store = createStore(todoApp);

关联reducer和store：

function mapStateToProps (state) {
    return {value: state.count};
}

function mapDispatchToProps (dispatch) {
    store.getState()
    return {onIncreaseClick: () => dispatch(increaseAction),onDecreaseClick: () => dispatch(decreaseAction)}
}

let App = connect(mapStateToProps,mapDispatchToProps)(Counter);

渲染组件到真是页面：

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,document.getElementById('app')
);

好了这就是react-redux的简单实用，react的的学习是一个漫长的过程，大家自己尝试一下吧。