Redux是什么
- Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
使用场景
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式（比如普通用户和管理员）
- 多个用户之间可以协作
- 与服务器大量交互，或者使用了WebSocket
- View要从多个来源获取数据
- 某个组件的状态，需要共享;某个状态需要在任何地方都可以拿到;一个组件需要改变全局状态;一个组件需要改变另一个组件的状态
重要概念
-
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 对象作为参数，将它发送出去。
使用案例
- 开发中一般使用脚手架
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);
