React学习 day-07（redux）

已于 2022-10-09 21:43:55 修改
阅读量976 收藏
点赞数
文章标签： react.js javascript 前端
于 2021-12-13 21:27:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61535334/article/details/121914893
版权

day-07

Redux 基础

今日目标

✔ 掌握 Redux 核心概念和基本使用。

✔ 掌握 react-redux 的使用。

✔ 掌握 TODOLIST 的实现思路。

了解 Redux

目标

能够说出为什么需要使用 Redux。

内容

Redux 中文官网，中文文档

  • 概念

Redux 是一个全局状态管理的 JS 库。

  • 背景

    a，React 的定位只是一个用来构建用户界面的库，并不是 Web 应用的完整解决方案。因此 React 在涉及到复杂组件之间的通信时会比较棘手，而对于大型项目来说，这方面恰恰是最关键的，因此只用 React 写大型项目会比较吃力。

    b，2014 年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。

    c，2015 年，Redux 出现，将 Flux 与函数式编程（Reducer）结合一起，很短时间内就成为了最热门的前端状态管理库，类似的还有 Mobx、Saga 等状态管理工具。

为什么要用 Redux

在这里插入图片描述

  • 不使用 Redux（图左边）

    a，只能使用父子组件通讯、状态提升等 React 自带机制，理远房亲戚（非父子）关系的组件通讯时乏力。

    b，组件之间的数据流混乱，出现 Bug 时难定位。

  • 使用 Redux（图右边）

    a，集中式存储和管理应用的状态，处理组件通讯问题时，无视组件之间的层级关系。

    b，简化复杂应用中的数据传递问题，数据流清晰，易于定位 Bug。

小结

Redux 解决了什么问题？

React跨组件的通信问题。

Redux 安装

目标

能够在 React 项目中准备 Redux 开发环境。

步骤

  1. 创建 React 项目。
npx create-react-app redux-basic
  1. 启动项目
yarn start
  1. 安装 Redux 包
yarn add redux

Redux 核心概念

目标

能够了解 Redux 三个核心概念的职责。

内容

阮一峰

  • 为了让代码各部分职责清晰、明确，Redux 提出三个核心概念，需要我们写代码的时候遵守。

    a，action（动作）：描述要做的事情（要干啥）。

    b，reducer（函数）：更新状态（怎么干）。

    c，store（仓库）：整合 action 和 reducer（谁来指挥）。

  • 通过例子来理解三个核心概念。

    a，action：相当于公司里面要做的事情，比如打扫卫生这个事等。

    b，reducer：相当于公司的员工，负责执行。

    c，store：相当于公司的老板。

    d，流程：老板（store）分配（dispatch）要做的事情（action）给员工（reducer），员工干完活把结果交给老板。

    e，在视图当中，通过 store dispatch 一个 action，reducer 会自动收到通知来更新 state，state 一旦变化，说有使用 state 的视图自然就变了。

在这里插入图片描述

Redux 核心概念 action

目标

定义一个最基本的 action。

内容

  • action 用来描述要做的事情，项目中的每一个功能都是一个 action，比如：

    a，计数器案例：计数器加 1、减 1。

    b，todomvc 案例：添加任务、删除任务等。

    c，项目：登录，退出等。

  • 特点：

    a，只描述做什么。

    b，本质上就是一个 JS 对象，必须带有 type 属性，用于区分动作的类型。

    c，可以通过 payload 携带额外的数据。

{ type： 'increment' }

// payload: 参数
{ type： 'decrement', payload： 2 }

{ type: 'addTodo', payload: '吃饭' }
{ type: 'addTodo', payload: '睡觉' }
{ type: 'removeTodo', payload: 3 }
store/actions.js
export const incremen = {
    type: 'INCREMENT',
    payload: 5,
}

export const decrement = {
    type: 'DECREMENT',
    payload: 5,
}

Redux 核心概念 action creator

目标

学会使用函数（actionCreator）去创建一个 action。

内容

  1. 问题：直接使用对象来创建 action 不灵活，参数写死了。
  2. 解决：可以使用函数来创建 action，通过传参把不一样的数据传递过去就好了，我们把这个创建 action 的函数叫做 actionCreator。
  3. 返回值：返回一个 action 对象。
  4. 好处：代码更加简洁，容易复用。

核心代码

store/actions.js
export const increment = (payload) => ({
    type: 'INCREMENT',
    payload,
})

export const decrement = (payload) => ({
    type: 'DECREMENT',
    payload,
})

小结

actionCreator 的作用和返回值是什么？

答：actionCreator作用是创建action，可以传参；返回值是action对象。

Redux 核心概念 reducer

目标

能够掌握 reducer 的基本写法。

内容

reducer：本质上是一个函数，作用是根据 action 来更新状态，有如下特点。

  • 函数签名为：(prevState, action) => newState。
  • 接收上一次的状态和 action，根据 action 的类型执行对应的操作，最终返回新的状态。
  • 原则：不要在 reducer 函数内部直接修改 state。

store/reducers.js

export default function counter(state = 10, action) {
    // 处理各种各样的 action
    switch (action.type) {
        case 'INCREMENT':
            return state + action.payload
        case 'DECREMENT':
            return state - action.payload
        default:
            // 记得要有默认返回的处理
            return state
    }
}

Redux 核心概念 纯函数

目标

了解纯函数的特点。

内容

  • 纯函数是函数式编程中的概念，对于纯函数来说有一个很重要的特点：相同的输入总是得到相同的输出。

  • 纯函数常具有以下特点。

    a，不得改写参数，不能使用全局变量。

    b，不能调用 Date.now() 或者 Math.random() 等不纯的方法，因为每次会得到不一样的结果。

    c，不包含副作用的处理，副作用：AJAX 请求、操作本地数据、或者操作函数外部的变量等。

  • 好处：代码简洁、方便测试、方便性能优化。

  • 为什么说纯函数呢？因为 reducer 要求自身就必须是一个纯函数。

const add = (a, b) => a + b
add(1, 2)
const add = (a, b) => a + b + Math.random()
add(1, 2)
add(1, 2)
const arr = [1, 2, 3, 4, 5]
arr.slice(1, 2)
arr.slice(1, 2)
arr.slice(1, 2)
const arr = [1, 2, 3, 4, 5]
arr.splice(1, 2)
arr.splice(1, 2)

Redux 核心概念 store

目标

掌握 store 的创建和基本使用。

内容

  • store：仓库，是 Redux 的核心，负责整合 action 和 reducer。

  • 特点

    a，一个应用只有一个 store。

    b，创建：const store = createStore(reducer)。

    c，获取数据：store.getState()。

    d，更新数据：store.dispatch(action)。

  • 其他 API

    a，订阅（监听）状态变化：const unSubscribe = store.subscribe(() => {})，注意要先订阅，后续的更新才能被观测到。

    b，取消订阅状态变化：unSubscribe()。

store/index.js，注意演示上面 API 需要先在 index.js 中引入此文件。

// store: 整个数据的仓库，负责关联 reducer 和 action，通过 store 对象可以给 reducer 分配 action
import { createStore } from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
export default store

小结

通过哪个 API 来创建 Store？创建 Store 需要什么参数？

答：通过createStore来创建Store，创建Store需要reducer。

点击计数 📝

目标

掌握在视图中使用和更新数据。

读取数据

在这里插入图片描述

App.js

import React from 'react'
import store from './store'

export default function App() {
    return (
        <div>
            <h3>count: {store.getState()}</h3>
        </div>
    )
}

更改数据

import React from 'react'
import store from './store'
import { increment, decrement } from './store/actions'

export default function App() {
    return (
        <div>
            <p>count: {store.getState()}</p>
            <div>
                <button onClick={() => store.dispatch(increment(1))}>+1</button>
                <button onClick={() => store.dispatch(increment(5))}>+5</button>
                <button onClick={() => store.dispatch(decrement(1))}>-1</button>
                <button onClick={() => store.dispatch(decrement(5))}>-5</button>
            </div>
        </div>
    )
}

解决问题

import ReactDOM from 'react-dom'
import App from './App'
import store from './store'

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

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

小结

store 中数据的变化，通过哪个方法可以被观测到？如何让视图更新？

答：store.subscribe()方法可以观测到store中数据的变化，重新渲染数据。

Redux 执行过程

目标

了解 Redux 的执行过程。

获取默认值的执行过程

  • 只要创建 store，Redux 内部就会调用一次 reducer，打印试一下 console.log(action.type)。

  • 类似：reducer(undefined, {type: "@@redux/INITv.a.4.t.t.p"})。

  • 这一次调用 reducer 的目的：获取状态的默认值。

  • 因为传入的状态值是 undefined ，并且是一个随机的 action type，所以!

    a，状态值因为 undefined，所以，我们设置的默认值就会生效，比如，此处的：10。

    b，因为是一个随机的 action type，所以，reducer 中 switch 一定无法命中，那就一定会走 default，也就是直接返回了状态的默认值，也就是：10。

  • Redux 内部拿到这个数据（比如此处的 10）以后，就用这个数据作为了 store 中的最新状态值。

  • 因此，将来当我们调用 store.getState() 方法来获取 Redux 状态值的时候，拿到的就是 10 了。

import { createStore } from 'redux'
import reducer from './reducer'
// 只要创建 store 传递了 reducer，Redux 内部就会自动的 dispatch 一次 action
// 目的：就是为了 store 能够有初始值，store.dispatch({ type: '@@xx699' })
const store = createStore(reducer)

// 所以可以拿到初始值
store.getState()

export default store

点击按钮后的执行过程

  1. 点击按钮，派发动作 store.dispatch(action)。
  2. 只要触发了 action，Redux 内部就会自动调用 reducer，根据上一次的状态和 action 计算出新的状态并返回。
  3. reducer 执行完毕后，将最新的状态交给 store，store 用最新的状态替换旧状态，状态更新完毕。

小结

点击按钮视图更新的流程是什么？

答：1.点击按钮，派发动作store.dispatch(action)

​ 2.只要触发了action，Redux内部就会自动调用reducer，根据上一次的状态和action计算出新的状态并返回。

​ 3.reducer执行完毕后，将最新的状态交给store，store用最新的状态替换

react-redux

基本介绍

  • 问题：为什么要使用 react-redux 这个库?
  • 回答：React 和 Redux 是两个独立的库，两者之间职责独立，因此，为了更好的实现在 React 中使用 Redux 进行状态管理，就需要一种机制，将这两个独立的库关联在一起，这就是 react-redux 出现的原因。
  • react-redux 是 Redux 官方提供的 React 绑定库。

基本使用

  1. 安装
yarn add react-redux
  1. 配置
index.js
import ReactDOM from 'react-dom'
import App from './App.js'
import store from './store/store.js'
// 1.导入包
import { Provider } from 'react-redux'

// 2.通过 Provider 包裹根组件并提供 store 供其他组件内部使用
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('#root')
)

// 用了 react-redux 下面手动触发更新的方式就没用了
/* store.subscribe(() => {
    ReactDOM.render(<App />, document.querySelector('#root'))
}) */

✍ 一旦使用了 react-redux，获取和更新数据的方式就变化了，要按照这个库的要求来。

useSelector

  • react-redux 这个库提供了 useSelector，作用：从 store 中获取状态。
  • selector 函数应该是个纯函数。
App.js
import React from 'react'
import { useSelector } from 'react-redux'
const App = () => {
    //3.获取store中的数据，接收函数，函数参数代表所有的状态，返回值表示需要返回的状态
    const count = useSelector((state) => state)
    return (
        <div>
            <h3>{count}</h3>
        </div>
    )
}
export default App

useDispatch

作用：得到 dispatch 来触发 action（触发 action 会执行 reducer，reducer 负责数据的修改，react-redux 内部会监听数据的变化自动进行视图更新）。

App.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/actions'
const App = () => {
    const count = useSelector((state) => state)
    //4.使用useDispatch hook生成dispatch
    const dispatch = useDispatch()
    return (
        <div>
            <h3>{count}</h3>
            <div>
                <button onClick={() => dispatch(increment(1))}>+1</button>
                <button onClick={() => dispatch(increment(5))}>+5</button>
                <button onClick={() => dispatch(decrement(1))}>-1</button>
                <button onClick={() => dispatch(decrement(5))}>-5</button>
            </div>
        </div>
    )
}
export default App

如果 Test 组件想用，看看有多方便吧，无需传值，直接拽过来！

import React from 'react'
import { useSelector } from 'react-redux'

export default function Test() {
    const money = useSelector((state) => state)
    return <div>{money}</div>
}

Reducer 的分离与合并

概述

  • 随着项目功能变得越来越复杂，需要 Redux 管理的状态也会越来越多，此时，有两种方式来处理状态的更新。

    a，使用一个 reducer，处理项目中所有状态。

    b，使用多个 reducer，按照项目功能划分，每一个 reducer 处理该功能的状态。

  • 推荐：使用第二种方案，每个 reducer 处理单一功能的状态，职责更明确。

  • 问题：此时项目中会有多个 reducer，但是 store 只能接收一个 reducer，因此需要将多个 reducer 合并为一个 reducer，才能传递给 store 使用。

  • 解决：使用 Redux 中的 combineReducers({ counter： counterReducer, user： userReducer }) 函数。

  • 注意：组件中再想只使用 counter 的状态，需要 const count = useSelector((state) => state.counter)

  • 每个 reducer 应该只关注自己的数据，例如：

    a，登录功能：loginReducer 处理的只应该是跟登录相关的状态。

    b，个人资料：profileReducer 处理的只应该是跟个人资料相关的状态。

    c，文章列表、文章详情、文章评论等。

步骤

  1. reducers.js 中新建 userReducer。
  2. 通过 combineReducers 合并 counter 和 user 并导出。
  3. 修改 App.js 和 Test.js 获取数据的方式。
  4. 新建 User.js 测试 userReducer 的使用。

代码

reducers.js
import { combineReducers } from 'redux'

function counter(state = 10, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + action.payload
        case 'DECREMENT':
            return state - action.payload
        default:
            return state
    }
}

function user(state = { name: 'ifer', age: 18 }, action) {
    switch (action.type) {
        case 'UPDATENAME':
            return {
                ...state,
                name: action.payload,
            }
        default:
            return state
    }
}

export default combineReducers({
    counter,
    user,
})
App.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/actions'
import Test from './Test'
import User from './User'
const App = () => {
    const count = useSelector((state) => state.counter)
    const dispatch = useDispatch()
    return (
        <div>
            <h3>{count}</h3>
            <div>
                <button onClick={() => dispatch(increment(1))}>+1</button>
                <button onClick={() => dispatch(increment(5))}>+5</button>
                <button onClick={() => dispatch(decrement(1))}>-1</button>
                <button onClick={() => dispatch(decrement(5))}>-5</button>
            </div>
            <Test />
            <User />
        </div>
    )
}
export default App
Test.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment } from './store/actions'

export default function Test() {
    const count = useSelector((state) => state.counter)
    const dispatch = useDispatch()
    return (
        <div>
            <p>Test {count}</p>
            <div>
                <button onClick={() => dispatch(increment(5))}>click</button>
            </div>
        </div>
    )
}
User.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { updateName } from './store/actions'

export default function User() {
    const user = useSelector((state) => state.user)
    const dispatch = useDispatch()
    const handleClick = () => {
        dispatch(updateName('xxx'))
    }
    return (
        <div>
            <h3>{user.name}</h3>
            <button onClick={handleClick}>update name</button>
        </div>
    )
}
actions.js
export const updateName = (payload) => ({
    type: 'UPDATENAME',
    payload,
})

ActionTypes

概述

  • 是什么：action 对象中的 type 属性。
  • Redux 项目中，同一个 type 会在不同文件中多次被用到，比如 actions.js、reducers.js 等。
  • 目标：集中处理 action type，保持一致性，容易维护！

操作

  1. 在 store 目录中创建 actionTypes.js 或 constants.js 文件。
  2. 使用常量创建 ActionType 并导出。
  3. 命名推荐：模块_动作，比如：
    • 计数器：COUNTER_INCREMENT 表示计数器模块中的 INCREMENT 动作。
    • TodoList：TODOLIST_ADD 表示 TodoList 案例中 ADD 动作。
    • 登录：LOGIN_GETCODE 表示登录模块中获取验证码的动作，LOGIN_SUBMIT 表示登录模块中的提交功能。
    • 个人信息：PROFILE_GETINFO 表示个人资料模块中的获取信息动作；PROFILE_UPDATEINFO 等。
  4. 哪里需要用到就按需导入。

代码

actionTypes.js
export const COUNTER_INCREMENT = 'COUNTER_INCREMENT'
export const COUNTER_DECREMENT = 'COUNTER_DECREMENT'
export const USER_UPDATENAME = 'USER_UPDATENAME'
actions.js
import { COUNTER_INCREMENT, COUNTER_DECREMENT, USER_UPDATENAME } from './actionTypes'
export const increment = (payload) => ({
    type: COUNTER_INCREMENT,
    payload,
})

export const decrement = (payload) => ({
    type: COUNTER_DECREMENT,
    payload,
})

export const updateName = (payload) => ({
    type: USER_UPDATENAME,
    payload,
})
reducers.js
import { combineReducers } from 'redux'
import { COUNTER_INCREMENT, COUNTER_DECREMENT, USER_UPDATENAME } from './actionTypes'

function counter(state = 10, action) {
    switch (action.type) {
        case COUNTER_INCREMENT:
            return state + action.payload
        case COUNTER_DECREMENT:
            return state - action.payload
        default:
            return state
    }
}

function user(state = { name: 'ifer', age: 18 }, action) {
    switch (action.type) {
        case USER_UPDATENAME:
            return {
                ...state,
                name: action.payload,
            }
        default:
            return state
    }
}

export default combineReducers({
    counter,
    user,
})

在项目中配置和使用Redux完整流程

1.先准备reducer

export default function counter(state = 10, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload
    case 'DECREMENT':
      return state - action.payload
    default:
      return state
  }
}

2.通过combineReducers合并reducer得到rootReducer

import { combineReducers } from 'redux'
import counter from './counter'
const rootReducer = combineReducers({ counter })
export default rootReducer

3.根据rootReducer创建store

export default createStore(rootReducer)

4.在入口文件配置react-redux并传递store

import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#root')
)

5.获取状态

import { useSelector } from 'react-redux'
const App = () => {
  const counter = useSelector((state) => state.counter)
  return (
    <div>
      <h3>{counter}</h3>
    </div>
  )
}
export default App

6.修改状态

import { useDispatch } from 'react-redux'
import { increment } from './store/actions'
const App = () => {
  const dispatch = useDispatch()
  return (
    <div>
      <button onClick={() => dispatch(increment(1))}>+1</button>
    </div>
  )
}
export default App

中间件概述

目标

能够理解为什么需要 Redux 中间件。

内容

默认情况下，Redux 自身只能处理同步数据流，但是在实际项目开发中，状态的更新、获取，通常是使用异步操作来实现。

  • 问题：如何在 Redux 中进行异步操作呢?
  • 回答：通过 Redux 中间件机制来实现。
  • 中间件，可以理解为处理一个功能的中间环节，对于 Redux 中间件来说就是在数据到达 reducer 之前进行一系列的处理操作。

触发时机

  • Redux 中间件执行时机：在 dispatching action 和 到达 reducer 之间。

    a，没有中间件：dispatch(action) => reducer。

    b，使用中间件：dispatch(action) => 执行中间件代码 => reducer。

  • 原理：封装了 Redux 的 dispatch 方法。

    a，没有中间件：store.dispatch() 使用的是 Redux 库自己提供的 dispatch 方法，用来发起状态更新。

    b，使用中间件：store.dispatch() 使用的是中间件封装处理后的 dispatch，但是最终还是会调用 Redux 库自己提供的 dispatch 方法。

没有中间件

在这里插入图片描述

有中间件

在这里插入图片描述

logger 中间件

  1. 安装：yarn add redux-logger。
  2. 导入 redux-logger。
  3. 从 redux 中导入 applyMiddleware 函数。
  4. 将 applyMiddleware() 调用作为 createStore 函数的第二个参数。
  5. 调用 applyMiddleware 函数时，将 logger 作为参数传入。
  6. 后续调用 store.dispatch() 时，控制台就会有日志信息输出。
store/index.js
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import rootReducer from './reducers'
export default createStore(rootReducer, applyMiddleware(logger))

redux-thunk 使用

redux-thunk 中间件可以处理函数形式的 action，而在函数形式的 action 中就可以执行异步操作代码，完成异步操作。

  1. 安装：yarn add redux-thunk。
  2. 导入 redux-thunk。
  3. 将 thunk 添加到中间件列表中。
  4. 修改 action creator，返回一个函数。
  5. 在函数形式的 action 中执行异步操作，在异步操作成功后，分发 action 更新状态。
store/index.js
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import rootReducer from './reducers'
export default createStore(rootReducer, applyMiddleware(thunk, logger))
store/actions/todo.js
export const clearTodo = () => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch({
                type: CLEAR_TODO,
            })
        }, 1000)
    }
}

redux-devtools-extension

目标

开发 React 项目时，能够通过 Chrome 开发者工具调试跟踪 Redux 状态。

步骤

  1. 保证浏览器安装了 Redux 的开发者工具。
  2. 通过包管理器在项目中安装 yarn add redux-devtools-extension。
  3. 在 store/index.js 中进行配置。
  4. 启动 react 项目，打开 chrome 开发者工具，测试

文档 redux-devtools-exension

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducers'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
export default createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))
乘刚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《二》react-redux
花铛
01-05 589
是 Facebook 开发的 React 插件库，能更方便地在 React 中使用 Redux。之前分别学过的 React 和 Redux 的部分是不变的，就是将 Redux 中的 Store 和 React 中的组件联系在一起。
在Redux中使用useSelector和useDispatch
前端精髓
05-07 4048
如何在redux中使用useSelector和useDispacth来获取数据。我们可以使用mapStateToProps的替代方法useSelector。我们还可以使用mapDispatchToProps的替代方法useuseppatch。 之前使用mapStateToProps和mapDispatchToProps的示例。 import update_person from './store/actions/personAction'; import { connect } from 'react-r
React中的useSelector+useDispatch
茂茂的博客
04-25 2418
React中的useSelector+useDispatch 我们都知道，Vue中的Vuex是Vue提供的一个全局性的状态管理仓库和工具，通过Vuex，很多事情就可以不调用接口和传值，只需要调用仓库去使用即可。那么在React中也有这样的状态管理仓库，它叫Redux。 当函数式组件要使用 redux store 时调用useSelector+useDispatch这两个钩子函数。 例子： 首先建立 redux store. 一个App 只能有唯一一个 redux store。此文件是一个手动建立的文件，这样
Redux学习3 useSelector 与 useDispatch
qq_40600414的博客
12-15 1648
Redux学习3 useSelector 与 useDispatch 在 react-redux 中学习了使用connect方法对ui组件进行加强，从而使得组件可以通过mapStateToProps和mapDispatchToProps来进行将 redux中的state的数据 存进props来读取和修改redux的数据，但是如果每个组件都要去利用connect方法进行加强，会太麻烦，所以reacct-redux 新版本7.1推出了hooks风格的api，可以更加简单的去操作redux的数据。 u
使用hooks编写redux
大灰狼的小绵羊哥哥的博客
06-25 2156
最近有一个问题比较火，是在有了react hooks之后，我们还需要redux这种状态管理工具吗？个人的观点是：仍然需要。react hooks帮助我们更好的复用代码逻辑，但是对于复杂应用而言，仍然需要redux来管理数据流，并且redux跟hooks的配合能够更好解耦组件的逻辑。最近发布的react-redux@7.1.0-alpha提供了对react hooks的支持，使用hooks将会改变过...
day11-react-redux-demo
02-23
总结，"day11-react-redux-demo"项目是一个基于React和Redux的示例，它展示了如何在React应用中利用Redux进行状态管理。通过学习这个项目，你可以深入了解React组件的运作机制，以及Redux如何解决大型应用中的状态...
react-reactdaypicker灵活的React日期选择器
08-15
10. **与其他React库的兼容性**：react-day-picker可以很好地与诸如Redux、Formik等其他React库集成，方便构建复杂应用。 在实际使用中，开发者可以从GitHub上的`react-day-picker-master`压缩包获取源代码，包含...
react-redux-portfolio-project-birdfeeder-backend:小型React-Redux应用程序可满足Flatiron全栈软件工程Bootcamp课程要求
03-16
这是我的React / Redux项目的后端，可以满足我的Flatiron全栈软件工程计划的要求。 前端在。 这个小应用程序的灵感来自我的朋友对院子里喂鸟器的迷恋。 该应用程序用作观鸟日记，可按日期跟踪看到哪些鸟在喂鸟器。 ...
react-day4-server-starter
03-19
在React Day 4的学习中，这个项目提供了一个起点，帮助开发者理解如何将React与Node.js服务器结合，实现高效且优化的Web应用程序。 1. **React基础知识**：React是Facebook开发的一款用于构建用户界面的JavaScript...
react-month-day:React组件以显示月份和日期
05-06
由于`react-month-day`的标签列表中仅提及"JavaScript"，我们可以假设这是一个纯JavaScript实现的React组件，没有依赖于其他特定的库或框架，如Redux或MobX。这意味着它可以轻松集成到各种类型的React项目中，无论...
react-redux@7.1.0 useSelector: 别啦 connect
weixin_30815427的博客
06-25 8254
React-redux 7.1发版啦。 API简单的介绍 因为在新的项目中用到了hooks，但是用的时候react-redux还处于alpha.x版本的状态。用不了最新的API，感觉不是很美妙。好在，这两天发布了7.1版本。 现在来看看怎么用这个新的API。 useSelector() const result : any = useSelector(selector : Function, eq...
Redux官网学习知识点（day2）：useSelector、useDispatch、createAsyncThunk、createSlice
Pandora_417的博客
10-11 898
useSelector useDispatch createAsyncThunk createSlice export const selectCount = (state) => state.counter.value; const count = useSelector(selectCount); <span className={styles.value}>{count}</span> import { useSelector, useDispatch } fr.
react性能优化
ICanWin_lll的博客
10-13 722
react中的性能优化
解决react中使用react-redux获取不到上下文
学全栈、大前端方向，就找前端早间课
06-13 2565
前端路上 | 所知甚少，唯善学。各位小伙伴有什么疑问，欢迎留言探讨。— 关注我：前端路上不迷路 —
react函数组件——use接收路由参数之HOOK函数获取——useSelector,useDispatch用法——antpc端表单的简单使用
阿牛哥的博客
10-07 1522
react函数组件——use接收路由参数之HOOK函数获取——useSelector,useDispatch用法——antpc端表单的简单使用
Redux自定义封装connect和usedispatch 和useSelector
qq_23539691的博客
08-09 676
前言 多的不多说 直接上代码 说实话，不太懂redux建议先看看文档 一切知识优先看文档和源码 看不懂的再去看一些机构的视频或者看某些大佬的文章 封装connect 本质上自己创建了一个上下文来取出数据state再派发出去。封装该层语法 connect语法 connect(mapStateToprops,mapDispatchToprops)(WrappedComponent) mapStateToProps 类型是个函数，作用是吧store的数据放在props上 在上下文中…props解构 funct
Redux with Hooks
weixin_30716725的博客
08-01 385
作者：Alex Xu 阅读时间大约15~20min 前言 React在16.8版本为我们正式带来了Hooks API。什么是Hooks？简而言之，就是对函数式组件的一些辅助，让我们不必写class形式的组件也能使用state和其他一些React特性。按照官网的介绍，Hooks带来的好处有很多，其中让我感受最深的主要有这几点： 函数式组件相比class组件通常可以精简不少代码。 没有生命周期的...
比connect更好用的redux hooks，useSelector以及useDispatch
lin_fightin的博客
01-21 2757
用过redux的都知道connect,但是每次我们用这个的时候是不是要写一堆代码， 如下， // const mapStateToProps = state => ({ // banner: state.recommend.banner // }) // const mapPropsToProp = dispatch => ({ // getBanner: (url)=>{dispatch(getBannerAction(url))} // // // }) // // e
如何将Redux与React Hooks一起使用
ETHAN IN IT
03-08 3217
在本文中，让我们一起来学习如何将Redux与React Hooks一起使用。 React Redux在2019年6月11日发布的7.1版中提供了对Hooks的支持。这意味着您可以在函数组件中将Redux与Hooks一起使用，而不是使用高阶组件（HOC）。 什么是Hook？ Hook是在React版本16.8中引入的，可以让我们访问函数组件中的状态和生命周期方法。 让我们看一个例子。 ...
react-native-redux-router
最新发布
04-12
react-native-redux-router是一个用于在React Native应用中管理路由和状态的库。它结合了React Native、Redux和React Navigation，提供了一种方便的方式来处理应用程序的导航和状态管理。 下面是一个简单的示例，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值