1、创建store文件 /src/store/index.js
import { createStore } from "redux";
//1、初始化
const initState = {
num: 1,
};
//2、定义修改方法
const reducer = (state = initState, action) => {
switch (action.type) {
case "doAdd":
return { ...state, num: state.num + 1 };
default:
return state;//默认返回state
}
};
//3、创建store管理reducer
//导出
export const store = createStore(reducer)
2、/src/index.js并给组件注入store
引入:
//引入Provider
import { Provider } from "react-redux";
//引入store
import { store } from "./store";
配置:
//注入store,注入后,组件中才可以使用
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
3、创建组件/src/components/One.js,引入在App.js中
App.js:
import React, { Component } from "react";
import One from "./components/One";
export default class App extends Component {
render() {
return (
<div>
<One />
</div>
);
}
}
/src/components/One.js:
快捷生成模板: rcredux
import React, { Component } from "react";
import { connect } from "react-redux";
export class One extends Component {
render() {
console.log(this.props);
const { num } = this.props.state;
const { doAdd } = this.props;
return (
<div style={{ border: "1px solid red" }}>
<div>One组件</div>
<div>num:{num}</div>
<div>
<button onClick={() => doAdd()}>num+1</button>
</div>
</div>
);
}
}
//读取,映射state到组件中
const mapStateToProps = state => ({
state,
});
//修改
//第一个doAdd是组件内部调用的方法,第二个doAdd是操作store方法的参数
const mapDispatchToProps = dispatch => ({
doAdd: () => dispatch({ type: "doAdd" }),
});
//把state注入到props,把dispatch注入到props
export default connect(mapStateToProps, mapDispatchToProps)(One);