博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
redux核心API
阅读量:528 次
发布时间:2019-03-08

本文共 5138 字,大约阅读时间需要 17 分钟。

redux是什么

Redux 是一个独立的js状态管理库,非React内容之一

为什么要使用redux

Redux本身是MVVM渐进式框架,M(数据模型) - V(视图) - VM(虚拟模型)

核心概念

  • state
  • reducer
  • store
  • action

state对象

通常我们会把应用中的数据存储到一个对象树中 进行统一管理,我们把这个位置称为: state

state 是只读的

这里需要注意的是,为了保证数据状态的可维护性和测试,不推荐直接修改state中的原数据

通过纯函数修改 state

  • 什么是纯函数

纯函数 – 函数式编程的一种概念

  1. 相同的输入永远返回相同的输出
  2. 不修改函数的输入值
  3. 不依赖外部环境状态
  4. 无任何副作用 (例如:异步请求以及定时器造成的问题)

使用纯函数的好处

  1. 便于测试
  2. 有利于重构

action 对象

  • 我们对state 的修改是通过reducer 纯函数来进行的,同时通过传入的 action 来执行具体的操作

  • action 是一个对象

  • type 属性: 表示要进行操作的动作类型, 增删改查。。。。

  • payload属性: 操作 state 的同时传入的数据

  • 但是这里需要注意的是,我们不直接去调用Reducer函数,而是通过Store对象提供的dispatch方法来调用

Store 对象 (负责存储的仓库)

  • 为了对 state, reducer, action,进行统一的管理和维护,我们需要创建一个Store对象(仓库)

redus 三大原则

  • 单一数据源: 整个应用的state 被储存在一棵 object tree中,并且这个object tree 只存在于唯一的store中

  • State 是只读的,唯一改变state的方法就是触发 action,action是一个用于描述已发生事件的普通对象

  • 使用纯函数来进行修改

如何使用

1. 安装

npm i redux

2. 引入

import {
createStore } from 'redux';

3. 创建一个仓库,参数为一个纯函数

let store = createStore(reducer);

4. reducer纯函数

因为state的值可读不可写,所以需要一个纯函数去修改内部的值

这里给state加了默认值,可以不加

function reducer(state = {
name: "电影院", age: 20}, action) {
return state;};

输出仓库看浏览器反馈

console.log(store);

在这里插入图片描述

dispatch

dispatch: ƒ dispatch(action) —— 发起一次修改 (同步方法,立即执行)

action:{
type: "做了什么修改" --必填 }

getState

getState: ƒ getState() —— 获取状态

replaceReducer

replaceReducer: ƒ replaceReducer(nextReducer) —— 替换掉 reducer

subscribe

subscribe: ƒ subscribe(listener) —— 监听状态的修改

使用getState

console.log(store.getState());

浏览器反馈

在这里插入图片描述

使用dispatch

使用dispatch发起1次修改后在获取状态

function reducer(state = {
name: "电影院", age: 20}, action) {
// 不加这行注释的话,switch...case 会提示不是期望默认值,不过不影响,加不加无所谓 // eslint-disable-next-line switch (action.type) {
case 'edit_name': return {
...state, name: action.name } } return state;};...store.dispatch({
type: "edit_name", name: "健身房"});...console.log(store.getState());

浏览器反馈

在这里插入图片描述
使用dispatch发起2次修改后在获取状态

function reducer(state = {
name: "电影院", age: 20}, action) {
// 不加这行注释的话,switch...case 会提示不是期望默认值,不过不影响,加不加无所谓 // eslint-disable-next-line switch (action.type) {
case 'edit_name': return {
...state, name: action.name }; case 'edit_age': return {
...state, age: action.age }; } return state;};...store.dispatch({
type: "edit_name", name: "健身房"});store.dispatch({
type: "edit_age", age: 2100});...console.log(store.getState());

浏览器反馈

在这里插入图片描述
使用dispatch发起3次修改且有一个是新属性后在获取状态

function reducer(state = {
name: "电影院", age: 20}, action) {
// 不加这行注释的话,switch...case 会提示不是期望默认值,不过不影响,加不加无所谓 // eslint-disable-next-line switch (action.type) {
case 'edit_name': return {
...state, name: action.name }; case 'edit_age': return {
...state, age: action.age }; case 'edit_time': return {
...state, time: action.time } } return state;};...store.dispatch({
type: "edit_name", name: "健身房"});store.dispatch({
type: "edit_age", age: 2100});store.dispatch({
type: "edit_time", time: '待定'});...console.log(store.getState());

浏览器反馈

在这里插入图片描述

使用subscribe

state发送改变时触发

  • 参数为:出发时执行的回调函数
function reducer(state = {
name: "电影院", age: 20}, action) {
// 不加这行注释的话,switch...case 会提示不是期望默认值,不过不影响,加不加无所谓 // eslint-disable-next-line switch (action.type) {
... } return state;};store.subscribe(()=>{
console.log(store.getState());});store.dispatch({
...});

浏览器反馈

在这里插入图片描述

combineReducers

我们上边已经使用了dispatch发起修改成功了,但是可以看出代码量是很多的,而且很庞大。

所以我们换一种写法

import React from 'react';import {
createStore, combineReducers } from 'redux';function index(state = {
name: "首页" }, action) {
// eslint-disable-next-line switch (action.type) {
case 'edit_name': return {
...state, name: action.name } } return state}function list(state = {
age: 20, time: "信息" }, action) {
// eslint-disable-next-line switch (action.type) {
case 'edit_age': return {
...state, age: action.age } case 'edit_time': return {
...state, time: action.time } } return state}function reducer(state = {
}, action) {
return {
index: index(state.index, action), list: list(state.list, action) }}let store = createStore(reducer);store.subscribe(() => {
console.log(store.getState())})store.dispatch({
type: "edit_name", name: "哈哈哈"})store.dispatch({
type: "edit_age", age: 2100})store.dispatch({
type: "edit_time", time: "待定"})function App() {
return (
123
)}export default App

浏览器反馈

在这里插入图片描述
但是这里还没有更简洁,可以把reducer这个函数换成下边这种写法

let reducer = combineReducers({
index, list});

参数: 传入一个对象,这个对象的属性中,就是要合并的reducer

注意点: 对象的属性名,要和函数名相同

浏览器反馈

在这里插入图片描述

转载地址:http://rlwiz.baihongyu.com/

你可能感兴趣的文章