一、redux简介
1.redux是一个专门用于做状态管理的js库(不是react插件库)
2.redux是独立存在的
二、redux核心原理图
三、 使用redux
下载redux
npm add redux
创建核心js,store.js
//专门用于创建redux中最为核心的store对象
import {createStore} from "redux";
//引入为Count组件服务的reducer
import countReducer from "./count_reduce";
export default createStore(countReducer)
创建reducer.js
import {DECREMENT, INCREMENT} from "./contains";
export default function countReducer(preState,action){
if (preState===undefined) preState=0
const {type,data} = action
switch (type) {
case INCREMENT:
return preState+=data;
case DECREMENT:
return preState-=data;
default:
return preState;
}
}
创建常量js
/*
* 该模块是用于定义action对象中type类型的常量值,目的只有一个:便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
创建action.js
import {DECREMENT, INCREMENT} from "./contains";
export const createIncrementAction = data =>({type:INCREMENT,data})
export const createDecrementAction = data =>({type:DECREMENT,data})
四、相关api
1.getState()
//获取store中的状态
<h1>当前求和为:{store.getState()}</h1>
2.dispatch()
//使用reducer
addBtn1 = () =>{
const {value} = this.selectNumber
store.dispatch({type:'increment',data:Number(value)})
}
3.subscribe()
//监测redux中状态的变化,只要变化,就调用render
//在index.js中引入store
store.subscribe(()=>{//由于diff算法,不会有效率问题
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>
,document.getElementById("root"))
})
五、使用react-redux
安装react-redux
npm add react-redux
创建UI组件
class CountUI extends Component {
render() {
return (
<div>
<h1>当前求和为:{this.props.count}</h1>
<select ref={c => this.selectNumber = c}>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
</select>
<br/>
<br/>
<br/>
<button onClick={this.incrementCount}>+</button>
<button onClick={this.decrementCount}>-</button>
<button onClick={this.incrementCountOdd}>和为奇数时加</button>
<button onClick={this.incrementCountAsync}>异步加</button>
</div>
);
}
incrementCount = () =>{
const {value} = this.selectNumber
this.props.jia(Number(value))
}
/* decrementCount = () =>{
const {value} = this.selectNumber
}
incrementCountOdd = () =>{
const {value} = this.selectNumber
}
incrementCountAsync = () =>{
const {value} = this.selectNumber
}*/
}
export default CountUI;
创建容器组件
import {connect} from "react-redux";
import CountUI from "../../components/CountUI";
import {createDecrementAction, createIncrementAction} from "../../redux/count_action";
export default connect(
state=>({count:state}),
{
jia:createIncrementAction,
jian:createDecrementAction
}
)(CountUI)
App.js中使用容器组件
import React, {Component} from 'react';
import Count from './containers/Count'
class App extends Component {
render() {
return (
<div>
<Count/>
</div>
);
}
}
export default App;
在index.js中,使用Provider统一管理(传递)store
import React from "react";
import ReactDOM from 'react-dom'
import {BrowserRouter} from "react-router-dom";
import App from "./App";
import {Provider} from "react-redux";
import store from "./redux/store";
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<App/>
</Provider>
</BrowserRouter>,
document.getElementById("root")
)
六、多组件使用redux共享状态
引入combineReducers
import {createStore,combineReducers} from "redux";
汇总reducer
const allReducer = combineReducers({
myCount:countReducer,
myPerson:personReducer
})
export default createStore(allReducer)