1.安装redux依赖
- 终端运行cnpm add redux
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e4ad95b18b55aca32f94a69b2a5ea559.png)
2.创建store.js文件和对象
import { createStore } from "redux";
import pageReducer from "./page_reducer";
export default createStore(pageReducer);
3.创建reducer.js文件
const initState = 0;
export default function pageReducer(preState = initState, action) {
const { type, data } = action;
switch (type) {
case "increment":
return preState + data;
case "decrement":
return preState - data;
default:
return preState;
}
}
4.组件
4.1 组件中的代码
import React, { Component } from "react";
import store from "../redux/store";
export default class Page1 extends Component {
componentDidMount() {
store.subscribe(() => {
this.setState({});
});
}
increment = () => {
const { value } = this.selectNumber;
store.dispatch({ type: "increment", data: value * 1 });
};
decrement = () => {
const { value } = this.selectNumber;
store.dispatch({ type: "decrement", data: value * 1 });
};
incrementIfOdd = () => {
const { value } = this.selectNumber;
const count = store.getState();
if (count % 2 !== 0) {
store.dispatch({ type: "increment", data: value * 1 });
}
};
incrementAsync = () => {
const { value } = this.selectNumber;
setTimeout(() => {
store.dispatch({ type: "increment", data: value * 1 });
}, 500);
};
render() {
return (
<div>
<h1>当前求和为:{store.getState()}</h1>
<select ref={(c) => (this.selectNumber = 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.incrementIfOdd}>当前求和为奇数再加</button>
<button onClick={this.incrementAsync}>异步加</button>
</div>
);
}
}
4.2 组件代码讲解
store.getState()
是获取store中的reducer加工后返回的数据;store.dispatch({ type: "increment", data: value * 1 });
是调用store中的reducer,并传给他action参数。store.subscribe()
的参数是一个回调函数,当store中的值发生改变的时候调用参数的回调函数。this.setState({});
必须要调用setState方法,才能让组件重新渲染,不然的话即使store中的值改变了,组件不重新渲染也看不出效果。- 为了避免每一个使用redux的组件都在component中调用
store.subscribe()
,可以将store.subscribe()
放在index.js文件中,如下:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./redux/store";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
store.subscribe(() => {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
});
5.实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4f3decd575e977fc36c257478be54a37.png)
6.简要总结
- 组件将共享的数据就放在store中,不再存放在自己的state中,但是自己的state也可以有数据。
- 与组件直接接触的只有store。
- 组件中运用的store对象不是redux依赖中本来就有的,是通过依赖中的createStore方法根据reducer创建的。
- reducer本质上只是一个函数,参数为preState和action,返回值为preState加工后的值。
- 从redux依赖中import的就只有一个函数而已:
import { createStore } from "redux";