首页 > 其他分享 >react native 使用 redux、react-redux、redux-thunk、@reduxjs/toolkit 无脑版

react native 使用 redux、react-redux、redux-thunk、@reduxjs/toolkit 无脑版

时间:2023-05-29 15:33:37浏览次数:42  
标签:count const react state 无脑 import redux

  1. 导入依赖
    yarn add redux react-redux redux-thunk @reduxjs/toolkit

     这是目录,为以下创建作为参考

  2. 新建reducer文件 counterReducer.js
    import { createSlice } from '@reduxjs/toolkit';
    
    const counterSlice = createSlice({
      name: 'counter',//名字,用途如:state.counter.count
      initialState: {
        count: 0,
      },
      reducers: {
        //一个方法(递增)根据自身需求更改
        increment: (state) => {
          state.count += 1;
        },
        decrement: (state) => {
          state.count -= 1;
        },
      },
    });
    //从 counterSlice.actions 中解构出 increment 和 decrement action creators,以便在应用程序中使用它们来分发相应的 action
    export const { increment, decrement } = counterSlice.actions;
    //返回 reducer供combineReducers组装
    export default counterSlice.reducer;
  3. 新建 reducer.js(对应上图的index.js)
    import { combineReducers } from 'redux';
    import counterReducer from './counterReducer';
    // 其他reducer
    
    const rootReducer = combineReducers({
      counter: counterReducer,
      // 其他reducer
    });
    
    export default rootReducer;
  4. 新建store.js
    import { configureStore } from '@reduxjs/toolkit';
    import rootReducer from './reducers';
    import thunkMiddleware from 'redux-thunk';
    
    const store = configureStore({
      reducer: rootReducer,
      // 其他配置选项
      middleware: [thunkMiddleware],
    });
    
    export default store;
  5. js使用
    import React from 'react';
    import { View, Text, Button } from 'react-native';
    import { connect } from 'react-redux';
    import { decrement, increment } from './redux/reducers/counterReducer';
    
    const Test = (props) => {
        return (
            <View>
                <Text>Count: {props.count}</Text>
                <Button title="Increment" onPress={props.increment} />
                <Button title="Decrement" onPress={props.decrement} />
            </View>
        );
    };
    
    export default connect(
        (state) => ({
            count: state.counter.count,
        }),
        {
            increment,
            decrement,
        }
    )(Test);
  6. tsx使用
    import React from 'react';
    import { View, Text, Button } from 'react-native';
    import {useDispatch, useSelector } from 'react-redux';
    import rootReducer from './redux/reducers';
    import { decrement, increment } from './redux/reducers/counterReducer';
    
    function Test(): JSX.Element {
      const count = useSelector((state: ReturnType<typeof rootReducer>) => state.counter.count);
      const dispatch = useDispatch();
    
      const handleIncrement = () => {
        dispatch(increment());
      };
    
      const handleDecrement = () => {
        dispatch(decrement());
      };
      return (
        <View>
          <Text>Count: {count}</Text>
          <Button title="Increment" onPress={handleIncrement} />
          <Button title="Decrement" onPress={handleDecrement} />
        </View>
      );
    }
    
    export default Test;
  7. *最后别忘了用Provider包起来不然会出现 ERROR Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>错误
    import React from 'react';
    import { Provider } from 'react-redux';
    import store from './redux/store';
    import Test from './Test';
    
    export default Home = () => {
      return (
        <Provider store={store}>
            <Test/>
        </Provider>
      );
    }

     

标签:count,const,react,state,无脑,import,redux
From: https://www.cnblogs.com/javaktolin/p/17440606.html

相关文章

  • 【React工作记录七十一】直接用ref控制子组件弹框的开启
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语如何直接通过父组件直接改变子组件的状态编......
  • 【React工作记录七十二】时间秒转换为毫秒
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣时间秒转换为毫秒编辑 核心代码getTim......
  • Webpack and Babel — What are they, and how to use them with React
    摘抄自:https://medium.com/@agzuniverse/webpack-and-babel-what-are-they-and-how-to-use-them-with-react-5807afc82ca8WebpackandBabel—Toolswecan’tcodewithoutWe’llbeconfiguringbothoftheseforourReactproject,sofirsthere’saquickexplanation......
  • 1. java + react 实现 HRM
    1.云服务的三种方式1.1IAAS基础设施即服务,只会提供基础的设施,eg:服务器,网络等;1.2PAAS平台即服务,提供平台,可以把自己写好的代码部署到平台上;1.3SAAS软甲即服务eg:hrm,cms,crm等;提供所有的服务;【部署到互联网】;......
  • 无脑转互联网的路不太好走啊
    本文首发自公粽hao「林行学长」,欢迎来撩,免费领取20个求职工具资源包。了解校招、分享校招知识的学长来了!如今,薪酬高,福利好的互联网行业已经成为了众多求职者眼中的“香饽饽”。很多同学在苦恼自己专业很难找到对口的岗位后,就转头研究起了互联网行业。“无经验上岸产品经理”、“零......
  • React 全局Loading
    import{Spin}from'antd'importReactDOMfrom'react-dom/client'importtype{SpinProps}from'antd'classLoading{privatecontainer=document.createElement('div')privateroot=ReactDOM.createRoot(this.co......
  • React18+TS+NestJS+GraphQL全栈开发示例
    React18+TS+NestJS+GraphQL全栈开发示例全栈开发是指一位开发人员可以熟练掌握前端、后端和数据库等多个领域的技术,能够完整地开发一个应用程序。在本文中,我们将介绍如何使用React18+TS+NestJS+GraphQL这个技术组合来进行全栈开发。技术选型在开始开发之前,我们需要选择合适的技术栈......
  • 【React工作记录六十八】ant design一个页面(新增编辑)
     目录前言导语总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语antdesign锚点组件编辑核......
  • 【React工作记录七十】判断数组对象中是否满足某条件
     目录前言导语 核心代码总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣歌谣数组......
  • 【React工作记录六十九】Taro中的轻提示
     目录前言导语代码部分运行结果代码部分运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷......