redux解析及实现简单的计数器

最新推荐文章于 2024-09-06 10:15:18 发布

_致远

最新推荐文章于 2024-09-06 10:15:18 发布

阅读量3.6k

点赞数 1

分类专栏： react 文章标签： react javascript

本文链接：https://blog.csdn.net/barbiElluck/article/details/118399577

版权

本文深入解析Redux的设计思想，通过一个简单的计数器应用，介绍如何创建store、编写reducer、定义action以及如何在组件中使用store。在Redux中，数据流遵循单向数据流，组件通过dispatch发送action，store接收并调用reducer更新state，最终更新视图。文章最后展示了应用的实际效果。

摘要由CSDN通过智能技术生成

redux的设计思想很简单，只有两句话

		1.web应用是个状态机，视图和组件是一一对应的。
		2.所有的状态，都保存在对象里面。

一.基本概念和API

在这里插入图片描述

图解：redux完美遵循了单向数据流，由视图组件通过dispatch发送一个action，store接收到这个action和传入的state，发送给reducers，reducers匹配对应的state并经过计算，形成新的state并返回给store，store返回给视图组件。

1.1将redux/index创建的组件引入到App.js内

在这里插入图片描述

1.2 store.js

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。

import {
   createStore} from "redux"
import {
    reducers } from "./reducer";

const store = createStore(reducers)   //生成store

export default store;

上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

1.3 reducer.js

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。



// Reducer是一个函数，他接受Action和当前state作为参数，返回一个新的state

//应用初始化的state
const defaultState = {
   
    count: 2021,
    city: "迈阿密",
}
export const reducers = (sta