应用的整体全局状态以对象树的方式存放于单个store。唯一改变状态树（state tree）的方法是创建action， 一个描述发生了什么的对象，并将其dispatch给store。要指定状态树如何响应action来进行更新，你可以编写reducer函数，这些函数根据旧的action来计算新state。
上面这段摘抄自官网，个人认为是比较通俗的概括了redux的使用方法，你或许还没有很理解它，继续往下看，相信你会有所收获
react 中使用redux
一个简单的例子，带你熟悉redux
image.png
‘默认值’ 存在state里，我们点击按钮之后，改变改值
image.png
使用脚手架创建应用，安装依赖
npx create-react-app redux-demo
安装redux
# NPM
npm install redux
# Yarn
yarn add redux
编写ui
//App.js
import React from "react";
import Home from "./page/home";
function App() {
return (
<div className="App">
<Home></Home>
</div>
);
}
export default App;
添加home组件
// src/page/home/index.js
import React from "react";
export default class Home extends React.Component {
render() {
return (
<>
<button>改变默认值</button>
<div>默认值</div>
</>
);
}
}
创建action：
在根目录下创建action文件夹，在action文件下创建index.js
这里我们定义一个action的构建函数，让他返回action对象
// 这是action的构建函数
const sendAction = () => {
// 返回一个action的对象
return {
type: "send_type",
value: "我是一个action",
};
};
export default sendAction;
action可以理解为表示即将放生的变化类别，它是一个普通的对象，必须包含type属性，这里我们添加我们需要的value属性，作为传递的数据
创建Reducer：
在根目录下新建reducer文件夹，在reducer文件夹下新建index.js 文件
本质就是函数，用于响应发送过来的action，函数接受两个参数，第一个是初始化state，第二个是发送过来的action
这里我们将默认的state也放到reducer 文件中Object.assign({},state,action);
如果action的type为send_type 则返回， 不要忘记将reducer暴露出去
const initState = {
value: '默认值'
}
const reducer = (state = initState, action) => {
switch(action.type) {
case 'send_type':
return Object.assign({},state,action);
default:
return state;
}
}
export default reducer;
创建store
store是用来把action和reducer关联到一起的， 我们通过createStore来构建store，通过subscribe来注册监，通过dispatch来发送action。
store.dispatch() 并传入一个action对象，store将执行所有reducer函数并计算出更新后的state，调用getState()可以获取新state
dispatch一个action可以形象的理解为“出发一个事件”，发生了一些事情，我们希望store知道这件事。Reducer就像事件监听器一样，当它们收到关注的action后，它就会更新state作为响应
这里是最难理解的地方，你可以认为store的dispatch方法才是最终告知要执行action的动作了，你这个动作具体做了什么需要reducer来处理
根目录下创建store文件夹，在store文件夹下创建index.js
同样的将store暴露出去
import { createStore } from "redux";
// 导入我们自己创建的reducer
import reducer from "../reducer"
// 构建 store
const store = createStore(reducer);
export default store;
action、reducer、store 都写好了，现在我们将这个redux用到组件中
我们通过store的subscribe来注册监，通过dispatch来发送action
组件一加载完成就注册监听
Home组件
import React from "react";
import store from "../../store";
import sendAction from "../../action";
export default class Home extends React.Component {
handleClick = () => {
const action = sendAction();
// 触发action
store.dispatch(action);
};
componentDidMount() {
// subscribe 监听
store.subscribe(() => {
this.setState({});
});
}
render() {
return (
<>
<button onClick={this.handleClick}>改变默认值</button>
<div>{store.getState().value}</div>
</>
);
}
}
store.getState()获取当前state
网友评论