redux

最新推荐文章于 2024-05-17 00:57:56 发布
最新推荐文章于 2024-05-17 00:57:56 发布
阅读量170 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5xiaoxiao/article/details/108229754
版权

为什么要使用状态管理

  1. 多个组件共用一个状态
  2. 状态管理，便于更新和维护

为什么React需要状态管理？

  1. react不是MVC框架，单纯可以看做是V(视图层框架)，缺失了M和C，
  2. 在flux/redux/mobx中，react是他们的构成部分

redux的项目用法

  1. 工具
    • redux
    • react-redux 数据分块
    • redux-thunk/redux-saga redux中的数据请求
    • redux-devtools-extension 用于激活浏览器中redux扩展插件
  2. 安装一个redux chrome扩展插件： redux-devtools
  3. 构建四个部分
    • store
    • actionCreators/actions
    • reducers
    • View

redux基本了解

  1. redux是flux进阶版
  2. redux要求数据修改必须是纯函数
  3. redux的state是只读的，唯一的
    • redux的state只能定义一个初始值
    • 要求你拷贝

redux流程图

  1. 构成部分

    • store 存储管理数据
    • React Component 视图
    • ActionCreators 动作创建者
    • Reducers 派发器 用于修改数据，并且返回一个新的状态值

  2. Flow

    • React --> ActionCreators --> Reducers -> Store --state-> React

  3. 案例实现

redux_single_demo

  • redux计数案例
    flow:
    1.首先打造redux中的 store
    2.reducer.js 1)定义初始状态 ; 2)对初始状态进行拷贝，并将拷贝后的新状态return出去
    3.组件中使用数据 1)组件中定义个状态来接受数据 ; 2）改数据的过程
    4.actionCreators.js中定义方法 1)创建动作 ; 2)发送动作 - store来发
    5.constant.js中定义动作的常量
    6.reducer接受到store发送过来的动作，判断动作的类型，修改数据
    7.useEffect进行视图的更新

src/store/index.js

import {createStore} from 'redux' //封装好了事件的订阅发布功能
import reducer from './reducer'
const store = createStore(reducer)

export default store

src/store/reducer.js

import {INCREMENT} from './constant'
//! 1. 定义初始状态
const initState = {
    count: 0,
    data: {
        name: 'eason'
    }
}
//reducer是一个纯函数              初始状态            动作
export default function reducer (state = initState,action) {
    // const newState = Object.assign({},state)
    // const newState = Object.create({},state)
    const newState = JSON.parse(JSON.stringify(state))//redux的state是只读的，唯一的，要求你拷贝
    // const newState = 递归深拷贝【自己封装、loadsh】
    // const newState = 使用第三方的一个库【Immutable】
    console.log('reducer')
    switch (action.type) {
        case INCREMENT:
            newState.count ++
            break;
    
        default:
            break;
    }

    return newState//返回一个新状态
}

src/store/constant.js

export const INCREMENT= 'INCREMENT'

src/store/actionCreators.js

import {INCREMENT} from './constant'
import store from './index'
export default {
    //1.创建动作
    increment () {
        console.log('actions')
        const action = {
            type: INCREMENT
        }
        //2.发送动作 - store来发
        store.dispatch(action)
    }
}

App.js

import React,{useState,useEffect} from 'react'
import store from './store'
import actions from './store/actionCreators'
export default function App() {
  const [count,setCount] = useState(store.getState().count)//redux自己封装的
  function add () {
    actions.increment()
  }
  useEffect(() => {
    store.subscribe(() => {
      setCount(store.getState().count)
    })
  },[])
  return (
    <div>
      <button onClick={add}> + </button>
        {count}
    </div>
  )
}

项目中的redux

  • redux计数案例

src/store/index.js

import {createStore,applyMiddleware} from 'redux'//createStore封装好了事件的订阅发布功能
import thunk from 'redux-thunk'//中间件 处理redux异步的数据请求
import {composeWithDevTools} from 'redux-devtools-extension'//激活谷歌的拓展插件
import rootReducer from '../reducers'
/*
    * rootReducer  项目中最大的reducer，用于管理项目中其他的reducer
    * createStore(reducer,redux需要的中间件)
*/
export default createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk)))

src/reducers/index.js

import {combineReducers} from 'redux'
import count from './count/reducer'
import list from './list/reducer'
export default combineReducers({
    //里面存放的就是其他reducers 
    count,list
})

src/reducers/count/reducer.js

import {INCREMENT} from '../../constant'
//1.定义初始状态
const initState = {
    n: 0
}
export default function reducer (state = initState,action) {
    switch (action.type) {
        case INCREMENT:
            state.n++
            return {...state}
            break;
    
        default:
            return {...state}
            break;
    }
}

src/constant/index.js

export const INCREMENT = 'INCREMENT'

export const GET_LIST = 'GET_LIST'

src/actions/count/index.js

import {INCREMENT} from '../../constant'
export default {
    increment () {
        //! 这里没有发起数据请求
        //! 这里我们只需要给一个返回值，这个返回值就是action
        return {
            type: INCREMENT
        }
    }
}

index.js - 入口文件

import store from './store'
//通过跨组件通信来获取数据
import {Provider} from 'react-redux'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

src/pages/Count.js

import React from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import actions from '../actions/count'
function Count (props) {
    const {n,increment} = props 
    return (
        <div>
            <button onClick={increment}> + </button>
            <p> { n } </p>
        </div>
    )
}

/* 
    * 第一个参数是用于帮助我们获取store中的数据的
    * 第二个参数是用于帮助我们获取actions中的方法，并将actions中创建的action发给reducer
*/
function mapStateFromProps (state) {
    return {n: state.count.n}
}
function mapDispatchFromProps (dispatch) {
     //actions就是把actions里的方法作成属性绑定在组件身上
    //dispatch就是用dispatch来发送actions里的动作；actions里的动作全部都是actions文件中return的返回值
    return bindActionCreators(actions,dispatch)
}
//connec函数的返回值是一个高阶组件
export default connect(mapStateFromProps,mapDispatchFromProps)(Count)
  • redux数据请求案例

src/reducers/list/reducer.js

import {GET_LIST} from '../../constant'
//1.定义初始值
const initState = {
    list: []
}
export default function reducer (state = initState,action) {
    const newState = JSON.parse(JSON.stringify(state))
    switch (action.type) {
        case GET_LIST:
            newState.list = action.payload//数据请求的返回值进行赋值
            return newState
            break;
    
        default:
            return newState
            break;
    }
}

src/actions/list/index.js

import {GET_LIST} from '../../constant'

export default {
    getList ({reqType,cid}) {
        //进行数据请求的 
        // return {type}
        //! 异步数据请求这里返回的是一个以dispatch为参数的回调函数，因为异步数据请求很难写return的
        return dispatch => {
            // 1. 进行数据请求
            // 2. 将数据请求结果作为action的一部分，发给reducer
            fetch(`http://59.110.226.77:3000/api/list/${reqType}?cid=${cid}`)
                .then(data => data.json())
                .then(res => {
                    dispatch({
                        type: GET_LIST,
                        payload: res.data.content
                    })
                })
                .catch(error => Promise.reject(error))
        }
    }
}

src/pages/List.js

import React,{useEffect} from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import actions from '../actions/list'

function List (props) {
    const {list,getList} = props 
    useEffect(() => {
        getList({
            reqType: 'hot',
            cid: 17
        })
    },[list])
    if (list.length == 0) {
        return <div> 数据为空 </div>
    }
    return (
        <div>
            <button onClick={() => { getList({reqType: 'hot',cid: 17 }) }}>人气</button>
            <button onClick={() => { getList({reqType: 'price',cid: 17 }) }}>价格</button>
            <button onClick={() => { getList({reqType: 'sell',cid: 17 }) }}>销量</button>
            <button onClick={() => { getList({reqType: 'latest',cid: 17 }) }}>最新</button>
            {list.map(item => <div key={item.id}> { item.d_title} </div>)}
        </div>
    )
}
export default connect(
    state => state.list,
    dispatch => bindActionCreators(actions,dispatch)
)(List)

文件夹目录
在这里插入图片描述

Eason ZhangF
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Redux
SHINE_SUNNY1的博客
07-26 238
Redux Redux提供一个可以预测的state状态管理器，让开发者可以更容易地开发复杂的javascript应用程序 Flux与Redux的差异 只使用一个 store 将整个应用程式的状态 (state) 用物件树 (object tree) 的方式储存起来： 原生的 Flux 会有许多分散的 store 储存各个不同的状态，但在 redux 中，只会有唯一一个 store...
Redux——详解
热门推荐
qq_56989560的博客
06-25 2万+
Redux
【Redux】redux的使用详解
羊羊羊羊羊羊羊的博客
06-21 4586
为什么要使用redux? JavaScript开发的应用程序，已经变得越来越复杂了：JavaScript需要管理的状态越来越多，越来越复杂;这些状态包括：服务器返回的数据、缓存数据、用户操作产生的文件数据等等，也包括一些 UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页;管理不断变化的state是非常困难的：Redux就是一个帮助我们管理State的容器：Redux是 JavaScript的状态容器，提供了可预测的状态管理**。
一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！
最新发布
计算机小white博客
05-17 1109
本文介绍了 Redux 的基本概念及其在 React 中的具体使用方法。通过构建合理的文件结构，配置 Redux Toolkit 和 React-Redux，实现状态管理。通过 Provider 组件、useSelector 和 useDispatch 钩子，简化了 Redux 与 React 组件的连接。同时，介绍了 Redux Thunk 中间件的使用，帮助处理异步操作，使应用的状态管理更加高效和可维护。
Redux基本介绍
一缕阳光@的博客
07-25 2696
Redux基本介绍
Redux使用详解(一) Redux的核心思想与基本使用
聪明勇敢有力气的博客
12-06 1376
Redux使用详解(一) Redux的核心思想与基本使用
redux详细介绍
yangyanqin2545的博客
01-25 5564
redux详细介绍 1、redux 1、redux是什么？ redux是一个专门做状态管理的js库（不是react插件库） 它可以用在react，angular,vue等项目中，但基本与react配合使用 作用：集中式管理react应用中多个组件共享状态 2、什么情况下使用redux 某个组件的状态，需要让其他组件可以随时拿到（共享） 一个组件需要改变另一个组件的状态（通信） 总体原则：能不用就不用，如果不用比较吃力才考虑使用 3、redux工作流程 二、redux的三个核心概念 1、ation (1)动作
redux-dev-tools
05-11
Redux DevTools 是一款针对 Redux 库的强大开发辅助工具，它为开发者提供了一个直观的方式来观察和调试应用中的状态变化。Redux 是一个广泛使用的 JavaScript 状态管理库，尤其在 React 应用中，它使得应用程序的...
Redux Demo
11-29
Redux 是一个广泛应用于JavaScript应用程序的状态管理库，尤其在React生态系统中极为常见。它提供了一种中心化的状态存储方式，使得应用中的所有组件都可以访问到共享的状态，并通过纯函数（Reducers）来更新这个...
redux-devtools工具
04-26
**Redux-DevTools：实时监控状态管理的利器** Redux，作为一个流行的状态管理库，被广泛应用于JavaScript应用，尤其是React项目中。它强制执行单一数据源和纯函数的更新，这在大型复杂应用中能带来清晰的数据流管理...
redux-demo:一个极其简单的Redux演示
05-27
从create-react-app到redux-demo项目运行地址项目运行：redux概述1、What is redux ?UI = render(state)，但是state只存在于组件内部。当页面有很多交互，有大量的组件之间的通信，那么我们仅仅使用react是极其复杂...
React 之 redux 详解
subsistent的博客
08-19 3693
状态管理是指在应用中维护数据状态的过程。随着应用不断变大，维护和同步数据状态的复杂度也会变得更高，因此状态管理是一个重要的问题。Redux 是一种 JavaScript 库，用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态，以实现组件间的数据共享和通信。Redux 遵循了一种单向数据流的架构模式，将整个应用的状态数据存储在一个全局的状态树（即 store）中，并通过明确的操作，比如 dispatch 一个 action，来修改数据状态。
Redux 简介
qq_43505867的博客
12-17 812
然后，一旦收到数据，就会发送另一个 action，该 action 的 data 是请求返回的数据同时也代表 API 操作完成。在这种情况下，要确保返回当前的。在 Redux 中，有一个状态对象负责应用程序的整个状态， 这意味着如果有一个包含十个组件且每个组件都有自己的本地状态的 React 项目，那么这个项目的整个状态将通过 Redux。可以将 Redux action 视为信使，将有关应用程序中发生的事件信息提供给 Redux store， 然后 store 根据发生的 action 进行状态的更新。
redux的原理、工作流程及其应用
weixin_46116626的博客
05-10 1万+
redux的原理、工作流程及其应用
redux的原理，redux的工作流程，redux的使用
tyxjolin的专栏
03-26 759
Redux 通过一个单一的全局状态存储来简化应用程序的状态管理，并通过严格的规则确保状态的可控性和可预测性。这样一来，我们就能够确保状态的不可变性，并且我们的状态更新操作将始终返回一个新的状态树对象，从而确保我们的应用程序状态始终是可控的和可预测的。在 Redux 中，我们使用纯函数来更新状态树，这可以确保我们的状态更新始终是可预测的和可控的。这可以确保我们的状态更新是可预测的和可控的，并且可以避免一些常见的状态管理问题，例如状态突变和竞态条件。这使得 Redux 的状态更改是可预测的和可控的。
redux是什么(redux工作原理)场景
m0_71955188的博客
06-28 548
Redux 的核心思想是将应用的状态（即数据）存储在一个全局的单一状态树中，并使用纯函数来描述状态的变化。这个单一状态树被称为 Redux store，而描述状态变化的纯函数被称为 reducer。通过 reducer，我们可以描述一个个离散的 action，根据 action 的类型来变更状态，并生成新的状态。Redux 的工作流如下：应用中的组件通过调用 action creator 创建 action 对象。Action 对象中必须有一个 type 属性，用于描述要执行的操作。
redux的介绍、安装、三大核心与执行流程
Gik99的博客
08-19 395
redux的介绍、安装、三大核心与执行流程
Redux状态管理深入解析
"这是一份关于Redux的深入学习资料，涵盖了从基础概念到实际应用的多个方面，旨在帮助读者全面理解和掌握Redux的使用。资料中提到了Redux的基本概念、工作流程、适用场景以及核心API，并通过实例展示了如何创建和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值