redux基础用法

最新推荐文章于 2024-04-07 15:17:16 发布

Joey_Tribiani

最新推荐文章于 2024-04-07 15:17:16 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记和总结文章标签： react redux 前端状态机 html

本文链接：https://blog.youkuaiyun.com/Joey_Tribiani/article/details/118970515

前端学习笔记和总结专栏收录该内容

62 篇文章

订阅专栏

初识redux（countr计数器为例）

了解redux

redux是第三方状态管理库，并非和react一样是facebook出品，在React项目中使用redux的时候是作为第三方库使用的（facebook官方有基于redux专门为react优化改进的react-redux，后边会讲到）

安装redux

yarn add redux --save

redux的核心是store、reducer和actions

action

action本质上就是一个对象，有两个属性type和data，分别代表操作类型和需要更改的数据，如下：

{type:"TEST_TYPE", data:{}}
// type是操作类型，data是传递的数据

store在操作reducer去更改状态的时候其实就是通过自己的dispatch方法将一个action对象作为第二个参数传给操作状态的reducer（第一个参数是操作前的状态prevState），然后reducer通过解析action的type和data来完成对store的状态的操作，其次，action的type一般会用一个常量文件types.js来存储，因为会在多个地方用到避免出错：

首先是需要创建action，现在工程目录中新建文件夹actions，然后新建创建countAction

//types.js
/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

引入常量后，action模块可以直接引用：

//countAction.js
/* 
	该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'

// 这里其实是暴露一个创建action的方法，因为data是在组件里面动态传入的
//因此这里是暴露函数，函数的返回值为action对象
export const increment = data => ({type:INCREMENT,data})
export const decrement = data => ({type:DECREMENT,data})

reducer

reducer是操作store里面的状态的方法，reducer的本质就是一个函数，会接到两个参数（被store用dispatch触发时），分别为：之前的状态(preState)，动作对象(action)，首先是需要创建reducer，现在工程目录中新建文件夹reducers，然后新建创建reducer（根据自己的命名习惯），这里一计数器为例创建一个countReducer

//创建reducer
/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'
const initState = {count: 0}
export default function countReducer(prevState = initState, action){
    //从action对象中获取：type、data，其实也可以直接在形参中结构获取
    const {type, data} = action
  	//根据type决定如何加工数据
	switch (type) {
		case INCREMENT: //如果是加
			return {...prevState, count:prevState.count + data}
		case DECREMENT: //若果是减
			return {...prevState, count:prevState.count - data}
		default:       
            //初始化的时候其实会有一个action type @@init2.0.3这种格式
            //会进入这个判断给store赋值初始值initState, 因为initState已经是prevState的默认值
			return preState
	}
}

store

首先是需要创建store，现在工程目录中新建文件夹store，然后新建store.js或者index.js（根据自己的命名习惯），在redux库中暴露了一个方法createStore，该方法是专门用来创建store的，接收的第一个参数为reducer。如下：

//store.js
import {createStore} from "redux"
//引入reducers，最初练习的时候reducer可以直接引入
//后期reducer超过一个的时候需要使用combineReducer方法进行合并
import {reducers} from "./reducers"
//创建并且暴露store
export default createStore(reducers)

使用redux

到目前为止就创建好了store，接下来就需要在组件中去使用redux；

在工程目录src下创建components目录，创建counter目录已经Counter.jsx组件（这里以函数式组件为例）:

//Count.jsx
export default () => {
    return (
    <div>当前求和为：</div>
    )
}

这样一个简单的react函数是组件就创建完成，然后在App.jsx里面引入该组件渲染在页面。

接下来要做的就是把store里面的count显示在组件中并且提供加和减的操作。

读取store里的数据

首先是引入store：

//Count.jsx
import store from "../store/store.js"

export default () => {
    
    //store对象提供了一个getState方法，调用该方法可以获取state
    const state = store.getState()
    
    return (
    	{/*因为在创建reducer的时候默认state为{count: 0},因此这里得到的也是{count: 0}*/}
    	<div>当前求和为：{state.count}</div>
      )
}

截止现在已经实现了对store里面的数据的读取。接下来还需要操作store里里面的状态。

操作store里面的状态

之前有说到操作store里面的状态的方法是store通过dispatch函数传递action来调用reducer来更新状态，因此需要先引入action

//Count.jsx
import store from "../store/store.js"
//引入action
import {increment, decrement} from "../store/action"

export default () => {
    
    //store对象提供了一个getState方法，调用该方法可以获取state
    const state = store.getState()
    
    //定义加法
    const increment = () => {
        //dispatch函数参数为action对象，该对象由调用countAction方法生成，
        //需要加的值传递给countAction生成一个action -----> {type:"increment", data: 1}
        store.dispatch(increment(1))
    }
    
    //定义减法
    const decrement = () => {
        //dispatch函数参数为action对象，该对象由调用countAction方法生成，
        //需要加的值传递给countAction生成一个action -----> {type:"decrement", data: 1}
        store.dispatch(decrement(1))
    }
    
    return (
    	{/*因为在创建reducer的时候默认state为{count: 0},因此这里得到的也是{count: 0}*/}
    	<div>
        	<span>当前求和为：{state.count}</span>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </div>
      )
}

这样就是现了UI组件对store里面的状态的操作和修改。

store状态更改后出发页面刷新

上面的操作确实可以实现对store里面的状态的读取和更改，但是现在的问题是store里面state更改时react并不会刷新视图，因此需要借用redux暴露的subscribe方法来监听变化刷新视图。具体操作就是在入口文件index.js里面引入监听

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'))

store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})