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)


相关推荐

  • 猴子吃香蕉编程题_2只小猴子摘了3根香蕉

    猴子吃香蕉编程题_2只小猴子摘了3根香蕉实验目的(1)熟悉谓词逻辑表示法;(2)掌握人工智能谓词逻辑中的经典例子——猴子摘香蕉问题的编程实现。实验内容房子里有一只猴子(即机器人),位于a处。c处上方的天花板上有一串香蕉,猴子想吃,但摘不到。房间的b处还有一个箱子,如果猴子站到箱子上,就可以摸着天花板。如图所示,对于上述问题,可以通过谓词逻辑表示法来描述知识。要求通过python语言编程实现猴子摘香蕉问题的求解过程。”’猴子摘香蕉问题的Python编程实现”’#全局变量ii=0defMonkey_go_box(x,y.

  • 415错误的一种解决方法

    415错误的一种解决方法出现415错误的解决方法:1.前端看ajax请求的contentType是否与后端一致2.看发送的数据格式是否正确。下例为后端所需数据为json格式,contentType为application/json的ajax请求。functiongetAddDirResponse(data){$.ajax({url:’/algor/api/datadirs’,

  • 手把手教你搭建 vue 环境

    手把手教你搭建 vue 环境

    2021年10月11日
  • leetcode-49字母异位词分组(map)[通俗易懂]

    leetcode-49字母异位词分组(map)[通俗易懂]原题链接给定一个字符串数组,将字母异位词组合在一起。字母异位词指字母相同,但排列不同的字符串。示例:输入: [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”]输出:[ [“ate”,”eat”,”tea”], [“nat”,”tan”], [“bat”]]说明:所有输入均为小写字母。不考虑答案输出的顺序。tclass Solution {public: vector<vector<string>> g

  • c语言实现香农编码和译码_香农编码码长

    c语言实现香农编码和译码_香农编码码长1、设计思想     为了设计的方便,我们需要在这个程序里设计一个结构体,以用来存储信源符号、信源符号概率等参数,将每一组参数看成一个结构体来看待,这样我们就可以随时地调用。2、设计流程     主函数部分,我们先接收要输入的信源符号个数,再接收每个信源符号的名称以及他的概率。    主函数设计好后,我们将各功能的函数分成几个模块来写,第一个是排序函数,如果你坚持从大到小输入则可以不用写;第二个…

  • 数据结构与算法 队列_数据结构中的排序算法

    数据结构与算法 队列_数据结构中的排序算法一、什么是队列队列是一种特殊的线性表。队列元素的进出遵循“先进先出”原则:即只允许在前端(front)也就是队头进行删除操作,而只能在后端(rear)也就是队尾进行插入操作。如图所示:队列的最

发表回复

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

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