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的的学习是一个漫长的过程，大家自己尝试一下吧。