一、认识redux
- 什么是redux?
- redux是一个专门用于做状态管理的JS库
(不是react插件库)
它可以用在react, angular, vue等项目中,
但基本与react配合使用- 作用: 集中式管理react应用中多个组件
共享的状态
- 什么情况下使用redux?
- 共享:某个组件的状态,其他组件也可以随时操作
- 通信:一个组件需要改变另一个组件的状态
- 但是,由于redux的使用较为复杂,在能避免使用的情况下尽量避免使用
二、redux的工作流程图
三、redux中的核心概念
- action
- 动作的对象,其中包含两个属性,分别是:
type:标识属性, 值为字符串, 唯一, 必要属性
data:数据属性, 值类型任意, 可选属性
- reducer
- 用于
初始化
状态、加工状态- reducer的本质就是一个函数,reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)
- reducer有两个作用:初始化状态,加工状态
- reducer被第一次调用时,是store自动触发的,传递的preState是undefined,传递的action是:{type:’@@REDUX/INIT_a.2.b.4}
- store
- 作用:将state、action、reducer联系在一起的对象
- 如何得到此对象?
import {createStore} from 'redux' import reducer from './reducers' //创建包含指定reducer的store对象 const store = createStore(reducer)
- 核心方法:
1.getState():
store.getState()用来获取redux中管理的数据
2.dispatch(action):
store.dispatch({type:‘INCREMENT’, number})
3.subscribe(listener):
store.subscribe(render)监测store中状态的改变,一旦发生改变重新渲染
四、案例——简单的加减法运算器
- 效果图:将组件Count中的count值放在redux中进行管理
- 安装
npm install redux
- 组件Count:
import React, { Component } from 'react'
import store from '../../redux/store'
import {incrementAction, decrementAction} from '../../redux/count_action'
export default class Count extends Component {
increment = () => {
const {value} = this.selectNode
store.dispatch(incrementAction(value*1))
}
decrement = () => {
const {value} = this.selectNode
store.dispatch(decrementAction(value*1))
}
oddIncrement = () => {
const data = store.getState()
const {value} = this.selectNode
if(data % 2 !== 0) {
store.dispatch(incrementAction(value*1))
}
}
asyncIncrement = () => {
const {value} = this.selectNode
setTimeout(() => {
store.dispatch(incrementAction(value*1))
}, 500)
}
render() {
return (
<div>
<h3>当前求和为:{store.getState()}</h3>
<select ref={c => this.selectNode=c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<button onClick={this.oddIncrement}>当前求和为奇数时加</button>
<button onClick={this.asyncIncrement}>异步加</button>
</div>
)
}
}
redux/count_action.js
export const incrementAction = data => ({type:'increment', data})
export const decrementAction = data => ({type:'decrement', data})
redux/store.js
import {createStore} from 'redux'
import countReducer from './count_reducer'
export default createStore(countReducer)
redux/count_reducer.js
const initState = 0
export default function countReducer (preState=initState, action) {
const {type, data} = action
switch(type) {
case 'increment':
return preState + data
case 'decrement':
return preState - data
default:
return preState
}
}
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import store from './redux/store'
ReactDOM.render(<App/>,document.getElementById('root'))
//数据发生变化时,渲染页面
store.subscribe(() => {
ReactDOM.render(<App/>,document.getElementById('root'))
})