react知识总结_六年级教学工作总结个人

react知识总结_六年级教学工作总结个人React个人入门总结《六》

大家好,又见面了,我是你们的朋友全栈君。

简介

这次要总结的是对 storereducer 的拓展,比如发送异步的 action 操作,还有一个就是对多个 reducer 的管理。

首先来总结一下 react-redux 的使用:

1. 下载 react-reduxredux 到项目中。

2. 引入 createStore 并且创建 store

<!-- reducer -->
function handleUser(state = [], action) {
  switch (action.type) {
    case 'ADD_USER':
      state.push(action.user)
      return [...state];
    case 'DELETE_USER':
      state.splice(action.payload, 1);
      return [...state];
    default:
      return state
  }
}
export { handleUser }; 

<!-- store -->
import { createStore } from 'redux';
import { handleUser } from '../Reducer/handleUser';

const store = createStore(handleUser);
export { store };
复制代码

3. 在 index.js 引入 store ,并且引入 Provider 并且将 store 传递给它。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './Redux/Store/store';
import * as serviceWorker from './serviceWorker';
import './assets/_reset.scss';

// 引入页面
import { UserContainer } from './Pages/UserContainer';

ReactDOM.render(
  <Provider store={ store }>
    <UserContainer />
  </Provider>,
  document.getElementById('root')
)
复制代码

4. 在 UI组件 中使用 connect 获取当前状态和使用 dispatch 发送 action

<!-- action -->
const addUser = (user) => ({
  type: 'ADD_USER',
  user: user
})
const deleteUser = (index) => ({
  type: 'DELETE_USER',
  index: index
})
export { addUser, deleteUser };


<!-- pages -->
import { addUser, deleteUser } from '../Redux/Action/addUserData';
const mapStateToProps = (state) => {
  return {
    userList: userList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addUserData: (user) => {
      return dispatch(addUser(user))
    },
    deleteUserData: (index) => {
      return dispatch(deleteUser(index))
    }
  }
}

UserContainer = connect(mapStateToProps, mapDispatchToProps)(UserContainer);
复制代码

以上就是 react-redux 的使用,下面继续拓展其他使用方式。


combineReducers

combineReducersredux 提供的一个方法,调用这个方法并且传入多个 reducer ,然后对这些 reducer 进行管理:

import { combineReducers } from 'redux';
import { handleUser } from './handleUser';
<!-- 写法一 -->
const chatReducer = combineReducers({
  userList: handleUser,
  <!-- ...这里可以写更多 reducer -->
})

<!-- 写法二 -->
const chatReducer = combineReducers({
  handleUser,
  <!-- ...这里可以写更多 reducer -->
})

export { chatReducer };
复制代码

上面的 combineReducers 传入的对象有两个写法,但是每个写法最终呈现的名字必须要与 state 一样:

const mapStateToProps = (state) => {
  return {
    <!-- 这时 state 返回的是一个对象,里面返回各个 reducer 返回的 state -->
    userList: state.userList
  }
}
复制代码

还有一点就是 store 设置默认值的问题。

<!-- 使用 combineReducers 之前-->
const store = createStore(
  handleUser,
  state
)

<!-- 使用 combineReducers 之后-->
const store = createStore(
  chatReducer,
  { userList: state }   // 这里参数必须是个对象,而且对象里面的键要和 combineReducers 设置的相同。
)
复制代码

store 可以接受三个参数,第一个参数是 reducer ,第二个参数代表状态默认值,用于覆盖 reducer 的默认状态。

store 的第三个参数

目前的 store 并不具备处理异步 action 的能力,我们可以使用 中间件 来实现这个操作。

applyMiddlewarestore 的第三个参数,它是一个函数,用来拓展 store ,这个方法来源于 redux

  • logger
  import { createLogger } from 'redux-logger';
  const logger = createLogger();
  
  const store = createStore( chatReducer, { userList: defaultUserList }, applyMiddleware(logger));
复制代码

logger 可以在发送 action 时打印状态的变化以及 action 的信息:

  • redux-thunk
  import thunk from 'redux-thunk';
  import { createLogger } from 'redux-logger';
  const logger = createLogger();
  const store = createStore(
    chatReducer,
    { userList: defaultUserList },
    applyMiddleware(thunk, logger)
  );
复制代码

正常情况下,dispatch 传递的参数只能是对象:

addUserData: (user) => {
  return dispatch({
    type: 'ADD_USER',
    payload: user
  })
}
复制代码

使用 redux-thunkdispatch 接受一个函数,让他能够进行异步操作:

addUserData: (user) => {
  return dispatch((dispatch, getState)=> {
    setTimeout(()=> {
      dispatch(addUser(user))
    }, 2000)
  })
}
复制代码

传递一个函数之后,这个函数可以接受两个参数,一个是 dispatch ,另一个是 getState ,然后在里面进行异步操作,我这里设置了 2秒 然后添加了一个用户,点击之后,过了 2秒 我的用户才会被添加进去,而页面也是等到 2秒 后重新渲染。

这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunkdispatch 能够接受一个函数作为参数。

  • redux-promise
  import thunk from 'redux-thunk';
  import { createLogger } from 'redux-logger';
  import promiseMiddleware from 'redux-promise';
  const logger = createLogger();
  const store = createStore(
    chatReducer,
    { userList: defaultUserList }, 
    applyMiddleware(thunk, promiseMiddleware, logger) // 按照严格的循序
  );
复制代码

上一种方法是使用 Action Creator 返回函数来操作异步,使用 redux-promise 可以让它返回一个 promise 对象,可以使用 then 来实现后面的操作。

deleteUserData: (index) => {
  return dispatch(new Promise((resolve, reject)=> {
    setTimeout(()=> {
      dispatch(deleteUser(index))
    }, 2000)
  }))
}
复制代码

使用 redux-promise 让它能够返回一个 使用 promise ,接着我们调用 使用 deleteUserData 函数时就可以执行 then 的操作。

总结

以上三个中间件都是对 store 的拓展,使用 applyMiddleware 并且分别传入三个 中间件 ,传入时必须要遵循顺序,否则会出问题:

applyMiddleware(thunk, promiseMiddleware, logger)
复制代码
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107035.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mysql错误代码1142_mysql创建数据库命令

    mysql错误代码1142_mysql创建数据库命令我在我的一台服务器上遇到了一些疑问,在所有其他地方,我已经测试它,它的工作完全正常,但在服务器上,我想使用它,它不工作。这是关于以下SQL:SELECTfacturen.idASfid,projecten.idASpid,titel,facturen.totaal_bedragAStotaal,betaald,datumFROMfact…

  • PHP递归算法_php递归函数详解

    PHP递归算法_php递归函数详解递归算法的实现方法是有多种的,如通过“静态变量”、“全局变量”、“引用传参”的方式:静态变量的方法:<?phpfunctioncall(){static$i=0;echo$i.”;$i++;if($i<10){call();}}call();输出:012345678…

  • 通过经纬度计算距离的公式是什么_excel经纬度计算距离公式

    通过经纬度计算距离的公式是什么_excel经纬度计算距离公式原文地址:http://www.storyday.com/html/y2009/2212_according-to-latitude-and-longitude-distance-calculation-formula.html在去年cosbeta曾经发布了一个网页计算工具,这个作用就是根据地球上两点之间的经纬度计算两点之间的直线距离。经纬度到距离的计算在通信工程中应用比较广泛,所以cosbet

  • 服务器系统详细安装步骤图_服务器系统安装教程详细步骤

    服务器系统详细安装步骤图_服务器系统安装教程详细步骤一、首先按住ctrl+alt+delete进行对KVM的重启操作,在进行重启的过程中按F2,进入BIOS界面,对RAID进行磁盘阵列:1、选择DeviceSetting,进入界面后选择RAIDControllerinSlot4:进行操作。2、先选择VirtualDiskManagement命令,查看系统是否已经进行了磁盘阵列。(如果已经存在进行步骤3,如果未存在进行步骤4)3、按Esc返回上一级,选择ConfigurationManagem…

  • nessus安装使用教程_kali linux全部功能教程

    nessus安装使用教程_kali linux全部功能教程一、Nessus介绍Nessus是目前全世界最多人使用的系统漏洞扫描与分析软件。总共有超过75,000个机构使用Nessus作为扫描该机构电脑系统的软件。提供完整的电脑漏洞扫描服务,并随时更新其漏洞数据库。Nessus专业版非免费的;家庭版是免费的,但单次任务只可以扫16个IP,这里注册的是家庭版,注册成功后会给邮箱发送一个激活码。二、安装下载家庭版https://www…

    2022年10月18日
  • MongoDB 服务无法启动

    MongoDB 服务无法启动MongoDB 服务无法启动

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号