在 React 的主要组件中使用 use dispatch 定义回调

Question

大家早上好，我有一个我在 React 中无法解决的问题，我的目的是定义一个按钮回调，它将在 redux 中设置一个状态的值，这个回调使用其中的 dispatch 方法，其中包含两个值两种不同的 redux 状态，似乎这些指令 ("

//保存从 redux store 中选择的值 const selectedValue: string|undefined = useSelector((state: RootState) => state.selectedOption);

//2. Save the input value from the redux store
const inputValue: string|null = useSelector((state: RootState) => state.inputTextValue);

") 在 redux 中商店的实际初始化之前执行，所以 react 给了我这个问题 --->“找不到 react-redux 上下文值；请确保组件包装在 ”

我试着这样定义它：

``// App.tsx
import React, {useCallback} from 'react';
import './App.css';
import { Card } from './components/organism/Card';
import {useState} from "react";
import {Context} from './context/Context'
import {imgData} from "./context/Context";
import {Provider, useDispatch, useSelector} from "react-redux";
import StudentExercise from "./components/organism/studentExercise/studentExercise";
import {createStore} from "redux";
import rootReducer from "./redux";
import { composeWithDevTools } from "redux-devtools-extension";
import {optionsArray} from "./redux/reducers/SelectedOption/selectedOption";
import {
    setBirthYear,
    setCourse,
    setName,
    setSurname,
    setTutor
} from "./redux/actions";


export type RootState = ReturnType<typeof store.getState>
// todo: cercare metodo non deprecato
const store = createStore(rootReducer, composeWithDevTools());// Reducer store
function App() {
    // States
    const [value, setValue] = useState('My context value');
    const [imageData, setImageData] = useState(imgData);
   

    // Callbacks:
    const dispatch = useDispatch();

    // Saving selected value from redux store 
    const selectedValue: string|undefined = useSelector((state: RootState) =>       state.selectedOption);

    //2. Saving another value from redux store
    const inputValue: string|null = useSelector((state: RootState) => state.inputTextValue);

    // Callbacks:

    const handleClick = useCallback(()=> {
        switch(selectedValue){
            case "name":
                console.log("Selected value --> ",selectedValue);
                console.log(inputValue);
                return dispatch(setName(inputValue));
            case "surname":
                return dispatch(setSurname(inputValue));
            case "birthYear":
                return dispatch(setBirthYear(inputValue));
            case "course":
                return dispatch(setCourse(inputValue));
            case "tutor":
                return dispatch(setTutor(inputValue));
            default: return selectedValue;
        }``your text``
    }, [dispatch]);

    return (
      <>
          <div className="App">
              <Provider store={store}>{/* Redux store */}

                  <Context.Provider value={{value, setValue}}>{/* Esercizio card */}
                      <Card/>
                  </Context.Provider>

                  <StudentExercise 
                                  clickHandler={handleClick} 
                                  title = {"changing values!"}/>
              </Provider>
          </div>
      </>
    );
}

export default App;``

我的期望是在最外层组件中定义一个回调，在本例中为 App，这样我就可以重用 StudentExercise 组件，但 handleClick 作为 prop 传递。 提前感谢您的帮助！

Answer 1

问题是这个

App

组件是渲染 Redux

Provider

组件并为 its 子 ReactTree 提供存储的组件。这意味着

App

本身无法访问商店，因为 ReactTree 中没有任何更高级别的 Redux 提供者。

在 ReactTree 中将

Provider

组件移到更高的位置，以便

App

可以访问 redux 存储。

例子：

import React, { useCallback, useState } from 'react';
import { useDispatch, useSelector } from "react-redux";
import './App.css';
import { Card } from './components/organism/Card';
import { Context } from './context/Context';
import { imgData } from "./context/Context";
import StudentExercise from "./components/organism/studentExercise/studentExercise";
import { optionsArray } from "./redux/reducers/SelectedOption/selectedOption";
import {
    setBirthYear,
    setCourse,
    setName,
    setSurname,
    setTutor
} from "./redux/actions";
import type { RootState } from './index.tsx';

...

function App() {
  const [value, setValue] = useState('My context value');
  const [imageData, setImageData] = useState(imgData);
   
  const dispatch = useDispatch();

  const selectedValue: string|undefined = useSelector((state: RootState) =>       state.selectedOption);
  const inputValue: string|null = useSelector((state: RootState) => state.inputTextValue);

  const handleClick = useCallback(()=> {
    switch(selectedValue) {
      case "name":
        return dispatch(setName(inputValue));
      case "surname":
        return dispatch(setSurname(inputValue));
      case "birthYear":
        return dispatch(setBirthYear(inputValue));
      case "course":
        return dispatch(setCourse(inputValue));
      case "tutor":
        return dispatch(setTutor(inputValue));
      default:
        return selectedValue;
    }
  }, [dispatch]);

  return (
    <div className="App">
      <Context.Provider value={{ value, setValue }}>
        <Card />
      </Context.Provider>
      <StudentExercise 
        clickHandler={handleClick} 
        title="changing values!"
      />
    </div>
  );
}

export default App;

import { Provider } from "react-redux";
import {createStore} from "redux";
import rootReducer from "./redux";
import { composeWithDevTools } from "redux-devtools-extension";

export type RootState = ReturnType<typeof store.getState>

const store = createStore(rootReducer, composeWithDevTools());

...

<Provider store={store}>
  <App />
</Provider>