Redux详解

Redux是什么

• Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

什么场景使用Redux

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据
• 某个组件的状态，需要共享;某个状态需要在任何地方都可以拿到;一个组件需要改变全局状态;一个组件需要改变另一个组件的状态

Redux概念

• state:store对象中的定义的初始数据(初始状态)。
• action:
  • action是一个对象用来描述当前发生的事情，action就是视图View发出的通知，表示state要发生改变；
  • View 要发送多少种消息，就会有多少种 action;通过action creator(action 创建函数)生成action，用来改变state状态。
• reducer
  • 定义state改变的规则即：store收到action后，必须给出新的state,这样view才会发生变化；这种state的计算过程就叫做reducer；
  • reducer是一个纯函数，可以保证同样的state，必定得到同样的 view;reducer并不能改变state。
• store:
  • 存储数据或者说是状态的容器，整个应用中只能有一个store;Redux提供createStore这个函数来生成store。
  • store.dispatch()是View发出action的唯一方法,store.dispatch接受一个 action 对象作为参数，将它发送出去。

Reduc使用

• 开发中一般使用脚手架create-react-app来搭建项目，Reduc的项目结构用如下：

├── store/              # Redux全局状态管理仓库
        ├── index.js                # 生成store容器并导出的地方
        ├── state.js                # 全局数据存储state
        ├── actions.js              # 定义actions创建函数
        ├── action-types.js         # 定义action的type字符串常量
        ├── reducers.js             # reducer规则

state.js示例

//Redux全局初始状态
export default {
    cityName: '北京',//定位地址 默认北京
    userName: '',//用户名
    id:[],
}

action-types.js示例

//所有actions函数的`type`字符串常量
export const STORE_UPDATE = 'STORE_UPDATE';
export const STORE_ADD = 'STORE_ADD';
export const STORE_RM = 'STORE_RM';

actions.js示例

//定义`action`创建函数生成`action`对象
import * as actionTypes from './action-types.js'

export function update(data) {
    return {
        type: actionTypes.STORE_UPDATE,
        data
    }
}

export function add(item) {
    return {
        type: actionTypes.STORE_ADD,
        data: item
    }
}

export function rm(item) {
    return {
        type: actionTypes.STORE_RM,
        data: item
    }
}

reducers.js示例

//定义Redux规则
import { combineReducers } from 'redux';
import * as actionTypes from './action-types.js';
import initialState from './state.js';

const userInfo = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.STORE_UPDATE:
            return action.data;
        case actionTypes.STORE_ADD:
            state.id.unshift(action.data.id);
            return state;
        case actionTypes.STORE_RM:
            state.id = state.id.filter(item => {
                if(item !== action.data.id) {
                    return state.id;
                }
            })
            return state;
        default:
            return state
    }
}

export default combineReducers({
    userInfo
})

index.js示例

//生成store容器

import { createStore } from 'redux';
import Reducers from './reducers';

export default function configureStore(initialState) {
    const store = createStore(Reducers,initialState,
        // 触发 redux-devtools
        window.devToolsExtension ? window.devToolsExtension() : undefined
    );
    return store;
}

在React框架中配合react-redux使用

App.js跟组件中

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import RouteMap from './router/router.jsx';
import configureStore from './store/index.js';

import './style/reset.scss';
import './style/font.scss';
import './style/common.scss';

//创建Redux的store对象
const store = configureStore();

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <RouteMap></RouteMap>
            </Provider>
        );
    }
}
export default App;

React组件中引入和改变redux的状态

import React, {Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as userInfoActionsFromOtherFile from "../../../../store/actions";

// 使用redux存储的状态
    loginCheck = () => {
        const id = this.props.id
        const userInfo = this.props.userInfo
        if (!userInfo.userName) {
            this.props.history.push({
                pathname:'/login',
                state: {
                    router: `/detail/${id}`
                }
            })
            return false
        }
        return true
    }

//改变redux状态
storeHandle = () => {
        // 验证登录，未登录则return
        const loginFlag = this.loginCheck()
        if (!loginFlag) {
            return
        }

        const id = this.props.id
        const userInfoActions = this.props.userInfoActions
        if (this.state.isStore) {
            // 已经被收藏了，则取消收藏
            userInfoActions.rm({id: id})
        } else {
            // 未收藏，则添加到收藏中
            userInfoActions.add({id: id})
        }
        // 修改状态
        this.setState({
            isStore: !this.state.isStore
        })
    }

// -------------------redux react 绑定--------------------
function mapStateTopProps(state) {
    return {
        userInfo: state.userInfo,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        userInfoActions: bindActionCreators(userInfoActionsFromOtherFile, dispatch)
    }
}

export default connect(
    mapStateTopProps,
    mapDispatchToProps
)(Buy);