redux快速入门

安装

在这里插入图片描述

使用步骤

  1. 定义reducer 函数(返回新的state)
  2. 使用createStore 传入reducer函数 生成一个store实例对象
  3. 利用store对象的subscribe方法订阅数据的变化
  4. 利用store对象的dispatch方法提交action对象触发数据变化(告诉reducer 怎么改数据)
  5. 使用store实例的getState方法获取最新状态更新到视图中

实例

创建store

子模块

import { createSlice } from '@reduxjs/toolkit'

//创建state 切片

const countSlice = createSlice({

    name: "counter",

    //1.初始化state

    initialState: {

        count : 0

    },

  

    //2.修改状态的方法  同步方法  支持直接修改

      // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它

      // 并不是真正的改变状态值,因为它使用了 Immer 库

      // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的state

    reducers:{

        increment(state){

            state.count++

        },

        decrement(state){

            state.count--

        }

    }

  

})

  
  

// 每个 case reducer 函数会生成对应的 Action creators

export const { increment , decrement} = countSlice.actions

// 获取reducer

export default countSlice.reducer

主模块

import { configureStore } from '@reduxjs/toolkit'

//导入子模块reducer

import counterReducer from './modules/counterSlice'

  

//创建store并导出

export default configureStore({

  reducer: {

    counter:counterReducer

  }

})

react 注入 store

react- redux 连接 Redux 与React
内置Provider 组件 通过store参数把创建好的store实例注入到应用中建立连接

在这里插入图片描述

在react组件中使用store中的数据

数据映射到组件

使用hook函数
useSelector
将store中的数据映射到组件中

在这里插入图片描述

修改数据

使用hook函数
useDispatch
生成提交action对象的dispatch函数


//导入hook

import {useDispatch , useSelector} from "react-redux"

import { decrement, increment } from "./ReduxDemo/store/modules/counterSlice";

function App() {

 
  //使用store中的数据

  const {count } =

  useSelector(state => state.counter)

  //修改store中的数据

  const dispatch = useDispatch();

  return(

    <>

    <p>

      App Page

    </p>

    {count}

    <button onClick={()=>dispatch(increment())}>+</button>

    <button onClick={()=>dispatch(decrement())}>-</button>

  

    </>

  )

  

}

  

export default App
  • 11
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值