react使用redux

Redux 是React生态中重要的组成部分

先看一张REDUX的流程图

  工作流：STORE就是存储数据状态的地方，例如某个地方（页面）操作了点击事件，事件派发给（调用）Action，然后action调用 deducer ，reducer更新store生成新的状态数据；

安装

npm install --save react-redux
npm install --save redux

基本概念

1 、Store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

Redux 提供createStore这个函数，用来生成 Store。

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

上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

2、 State

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

当前时刻的 State，可以通过store.getState()拿到。

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

const state = store.getState();

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

3、 Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

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

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。

可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

4 Action Creator

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO';

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

const action = addTodo('Learn Redux')

上面代码中，addTodo函数就是一个 Action Creator。

5 store.dispatch()

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

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

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

上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。

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

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

6 Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = function (state, action) {
  // ...
  return new_state;
};

整个应用的初始状态，可以作为 State 的默认值。

下面是一个实际的例子。后台管理系统的，页头（当前页面标题的切换）

1、action 下 index.js

/**
* Action 类型
* 工作流: 点击事件 调用action的方法，然后action 调用 reducer， redcuer 更新store里面的状态
* 新增的话就新增type便可
*/
export const type = {
    SWITCH_MENU: 'SWITCH_MENU'
}

// action 要出发一个方法（例如：点击菜单的时候调用这个方法）
export function switchMenu(menuName){
    return {
        type: type.SWITCH_MENU,
        menuName
    }
}

2、reducer 下 index.js

/**
* reducer 数据处理
*/
import { type } from './../action'
const initState = {
    menuName: '首页'
}

export default (state = initState, action) => {
    switch(action.type){
        case type.SWITCH_MENU:
            return {
                ...state,
　　　　　　　　　　// 当匹配到 这个type 时候，storre保存数据 menuName
                menuName: action.menuName
            }
            break;
        default: 
            return {
                ...state
            }
            break;
    }
}

3、store里面 Index

/**
* 转台管理总部
* 引入 createStore
* store 依赖于 reducer, reducer依赖于 action
*/
import { createStore } from 'redux';
import reducer from './../reducer'


export default (prevState)=>createStore(reducer, prevState)

入口文件index里面

import { Provider } from 'react-redux'
import configStore from './redux/store/configStore'
const store = configStore();

ReactDOM.render(
　　// 将 store 数据作用在整个路由里面以供访问
    <Provider store={store}>
        <Router />
    </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

调用分发ACTION；某个页面点击事件调用action 

// 通过 connect 连接redux和react
import { connect } from 'react-redux'
// 引入action 的方法
import { switchMenu } from './../../redux/action'

class Slider extends React.Component {
    // 点击菜单
    handleSlide = ({item})=>{
        var menuName = item.props.children.props.children;
        const { dispatch } = this.props;
        dispatch(switchMenu(menuName))
    }
    // 菜单渲染
    renderMenu = (data) => {
        return data.map( (item) => {<Menu.Item key={item.key}
                    onClick={this.handleSlide}
                >
                    <NavLink to={item.key}>{item.title}</NavLink>
                </Menu.Item>
        })
    }

    render() {
        return <div>
            <Menu theme="dark">
                {this.state.menuTree}
            </Menu>
        </div>
    }
}
// 注意这里的写法
export default connect()(Slider);

使用store数据

import { connect } from 'react-redux'

class Headers extends React.Component{
    render(){
        return( 
            <div className="admin_header">
               <Row className="breadcrumb">
                   <Col span="20" className="header_bottom_right">
                        <span>{ this.state.systime }</span>
               </Row>
            </div>
        )
    }
}

// 这里使用redux里面的数据  slide 是调用action的方法存储
const mapStateToProps = state => {
  return {
    menuName: state.menuName
  }
}
export default connect(mapStateToProps)(Headers)