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