我试图将数据从redux存储传递到其他组件,但try 了许多方法后出现错误.

App.js的代码如下所示,包装在提供程序中

import React from 'react';
import Babe from './Babe';
import type { PropsWithChildren } from 'react';
import Test from './navigate/Test';
import Hot from './navigate/Hot';
import Coffee from './navigate/Coffee';
import Tea from './navigate/Tea';
import FullCourse from './navigate/FullCourse';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import FullCourse2 from './navigate/FullCourse2';
import { Provider } from 'react-redux';
import store from './src/app/store';
import { useSelector } from "react-redux";
import { showData } from './src/features/showslice'

const Stack = createStackNavigator();

以上各节都有必要的导入,下面的部分则是在使用useSelector钩时出现问题的地方.

const App = () => {
  const data = useSelector((c) => {
    return console.log(c)
  })

  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="In-Flight Services" component={Babe} />
          <Stack.Screen name="Cold Water" component={Test} />
          <Stack.Screen name="Hot Water" component={Hot} />
          <Stack.Screen name="Tea" component={Tea} />
          <Stack.Screen name="Coffee" component={Coffee} />
          <Stack.Screen name="Meal" component={FullCourse} />
          <Stack.Screen name="Meal2" component={FullCourse2} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  )
}

export default App;

切片代码如下所示,我正在try 将值5即state.value访问到app.js中.

import { createSlice } from '@reduxjs/toolkit'

// const initialState = { value: 0 }

export const showslice = createSlice({
  name: 'showData',
  initialState: { value: 3 },
  reducers: {
    addData: () => { },
    showData: (state, action) => {
      return state.value = 5
    }
  }
})

export const { addData, showData } = showslice.actions
export default showslice.reducer

// Action creators are generated for each case reducer function
// the showData in the store which is being assigned represents showslice.reducer

store 代码如下

// import { configureStore } from '@reduxjs/toolkit'
import { configureStore } from '@reduxjs/toolkit'
import showData from '../features/showslice'

const store = configureStore({
  reducer: {
    show: showData
  },
})

export default store

进口Cargo 经过多次判断都是正确的.

我希望值useSelector存储在const data中,以便显示它,但在useSelector行发生了错误.

推荐答案

App组件是呈现Redux St或e Provider组件的组件,因此App本身107通过useSelect或钩子订阅该store .如果App需要订阅存储,那么在ReactTree中,Provider组件应该比试图访问它提供的上下文的App组件移动得更高.

示例:

Provider向其子react 树提供Redux上下文.

<Provider st或e={st或e}>
  <App />
</Provider>
const App = () => {
  const data = useSelect或((state) => state.show.value); // <-- can access st或e

  return (
    <NavigationContainer>
      <Stack.Navigat或 screenOptions={{ headerShown: false }}>
        <Stack.Screen name="In-Flight Services" component={Babe} />
        <Stack.Screen name="Cold Water" component={Test} />
        <Stack.Screen name="Hot Water" component={Hot} />
        <Stack.Screen name="Tea" component={Tea} />
        <Stack.Screen name="Coffee" component={Coffee} />
        <Stack.Screen name="Meal" component={FullCourse} />
        <Stack.Screen name="Meal2" component={FullCourse2} />
      </Stack.Navigat或>
    </NavigationContainer>
  );
};

此外,切片缩减器应该仅改变返回下一状态值101的状态100.

exp或t const showslice = createSlice({
  name: 'showData',
  initialState: { value: 3 },
  reducers: {
    addData: () => { },
    showData: (state, action) => {
      state.value = 5;
    },
  }
})

exp或t const showslice = createSlice({
  name: 'showData',
  initialState: { value: 3 },
  reducers: {
    addData: () => { },
    showData: (state, action) => {
      return { value: 5 };
    },
  }
})

Typescript相关问答推荐

使用ngrok解析Angular 时出现HTTP故障

无法正确推断嵌套泛型?

如何在另一个参数类型中获取一个参数字段的类型?

如何在Angular 12中创建DisplayBlock组件?

React Typescript项目问题有Redux-Toolkit userSlice角色问题

错误TS2403:后续变量声明必须具有相同的类型.变量';CRYPTO';的类型必须是';CRYPATO';,但这里的类型是';CRYPATO';

在类型脚本中创建泛型类型以动态追加属性后缀

为什么ESLint会抱怨函数调用返回的隐式`any`?

如何在方法中正确地传递来自TypeScrip对象的字段子集?

使用或属性编写无限嵌套的接口

无法缩小深度嵌套对象props 的范围

编剧- Select 下拉框

如何创建一个将嵌套类属性的点表示法生成为字符串文字的类型?

基于区分的联合键的回调参数缩小

Typescript不允许在数组中使用联合类型

确保财产存在

TS2532:对象可能未定义

从平面配置推断嵌套递归类型

如何使用 TypeScript 接口中第一个属性的值定义第二个属性

如果在另一个对象中指定了递归省略字段?