react-redux实践
react-redux实践
了解
1、什么是redux
官方解释：redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具（状态管理机），用来做组件通信等。
2、为什么使用redux
90a9e69d3675d26d70dd270708d442188b3.jpg
当没有使用redux时兄弟组件间传值将很麻烦，代码很复杂冗余。使用redux定义全局单一的数据Store，可以自定义Store里面存放哪些数据，整个数据结构也是自己清楚的。
3、state
前端中的state就是数据，就是一个对象。redux中的state是不能直接修改的，只能通过action来修改，相当于我们在单例中定义setter方法。
4、action
redux 将每一个更改动作描述为一个action，要更改state中的内容，你需要发送action。一个action是一个简单的对象，用来描述state发生了什么变更。
const INCREMENT = 'INCREMENT'
const incrementAction = {"type": INCREMENT, "count": 2}上面这就是一个action，说白了就是一个对象，根据里面的type判断做什么操作。
5、reducer
数据state，指示action都有了那么就是实现了。reducer就是根据action来对state进行操作。
const calculate = (state: ReduxState = initData, action: Action ) => {
switch (action.type) {
case INCREMENT:
return {num: state.num + action.count}
case REDUCE:
return {num: state.num - action.count}
default:
return state
}
}
export {calculate}通过reducer操作后返回一个新的state，比如这里根据action的type分别对state.num进行加减。
6、store
store就是整个项目保存数据的地方，并且只能有一个。创建store就是把所有reducer给它。
import { createStore, combineReducers } from "redux";
import { calculate } from "./calculate";
// 全局你可以创建多个reducer 在这里统一在一起
const rootReducers = combineReducers({calculate})
// 全局就管理一个store
export const store = createStore(rootReducers)7、dispatch
store.dispatch()是组件发出action的唯一方法。
store.dispatch(incrementAction);通过store调用incrementAction，那么就直接把store里的数据修改了。
一、创建项目、添加依赖
- 创建项目
$ yarn create react-app redux-demo --typescript- 添加redux
$ yarn add redux react-redux @types/react-redux @types/redux- 添加路由
$ npm install --save react-router-dom需要注意的是还需要配置一下tsconfig.json，创建tsconfig.paths.json否则编译报错。可以拷贝示例项目中的两个文件。下面为示例中的主要代码，写了一个简单加减修改数据。
屏幕快照 2019-07-18 14.43.34.png
二、核心代码
<!--pages/home/index.tsx-->
import React, { Component } from 'react';
import './index.css'
import { incrementAction, reduceAction } from '../reducers/calculate';
import { connect } from 'react-redux';
<!--定义Home的属性-->
interface Props {
num: number,
increment: ()=>any,
decrement: ()=>any,
}
<!--从全局state中拿数据设置到Home的props-->
const mapStateToProps = (state: any) => {
return {
num: state.calculate.num
};
};
const mapDispatchToProps = (dispatch: any) => ({
increment: () => dispatch(incrementAction),
decrement: () => dispatch(reduceAction)
});
<!--组件链接到redux的store-->
@(connect( mapStateToProps, mapDispatchToProps, ) as any)
export default class Home extends Component<Props, any> {
render() {
return <div className='container'>
<p onClick={this.props.increment}>click to increment num</p>
<p onClick={this.props.decrement}>click to decrement num</p>
<p>{this.props.num}</p>
</div>
}
}一个store可以添加多个reducer，比如这里是一个加减的reducer，你还可以分文件创建其它的操作，便于分类管理。只要创建store的时候使用combineReducers全部绑定到一起就可以了。
<!--这里是实现加减的reducer-->
export const INCREMENT = "INCREMENT"
export const REDUCE = "REDUCE"
export const incrementAction = {type: INCREMENT, count: 2}
export const reduceAction = {type: REDUCE, count: 1}
interface ReduxState {
num: number
}
interface Action {
type: string,
count: number,
}
const initData = {
num: 0
}
const calculate = (state: ReduxState = initData, action: Action ) => {
switch (action.type) {
case INCREMENT:
return {num: state.num + action.count}
case REDUCE:
return {num: state.num - action.count}
default:
return state
}
}
export {calculate}