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);

作者：前端小兵
链接：https://www.jianshu.com/p/7ea0af5e81c8