反应演示组件无法使用反应容器从 redux 存储中读取 <input /> 的值

Question

我是 stackoverflow 的新手，对使用 react/redux 也很陌生。我已经浏览了很多帖子，看看是否有类似的帖子可以为我提供答案，但我仍然感到困惑。

我目前有一个展示组件“重复”和一个容器组件，用于从 redux 存储中获取道具并将操作从展示组件分发到 redux 存储。当我在输入字段中输入数据时，我有显示组件更新 redux 存储，但我想使用 redux 存储来检索输入值，这样当用户第一次进入页面时，输入值为“0”这是 redux 存储中的初始值。

我最初使用 react/redux 制作了一个简单的 Counter 组件，它工作正常。从那以后，我制作了“重复”组件并更改了 redux 存储以使用 combinereducer，这就是问题似乎开始的时候，因为两个组件都无法从 redux 存储中读取。

Rootreducer.ts

import { combineReducers } from "redux";
import countReducer from "./example/reducer";
import repetitionsReducer from "./reps/reducer";

const rootReducer = combineReducers({
    countReducer,
    repetitionsReducer
})

export default rootReducer;

RepetitionsReducer.ts

import { RepetitionsState } from "../types";
import { AddRepetitionsAction } from "./actions";

export type RepetitionsActionType = AddRepetitionsAction;

export type Dispatch = (action: RepetitionsActionType) => void;

// The reducer updates the count
const initialState: RepetitionsState = {
  repetitions: 0
};

const repetitionsReducer = (
  state = initialState,
  action: RepetitionsActionType
): RepetitionsState => {
  switch (action.type) {
    case "ADD_REPETITIONS":
      return { ...state, repetitions: action.repetitions };
    default:
      return state;
  }
}

export default repetitionsReducer;

RepetitionsContainer.ts

import { connect } from "react-redux";
import { RootState } from "../../store/types";
import { Dispatch } from "../../store/reps/reducer";
import { addRepetitions } from "../../store/reps/actions";
import Repetitions from "../../components/reps/Repetitions";

interface StateFromProps {
  repetitions: number ;
}

interface DispatchFromProps {
  updateRepetitions: (repetitions: number) => void;
}

export type RepetitionsProps = StateFromProps & DispatchFromProps;

const mapStateToProps = (state: RootState): StateFromProps => ({
  repetitions: state.repetitions
});

const mapDispatchToProps = (dispatch: Dispatch): DispatchFromProps => ({
  updateRepetitions: (repetitions: number) => dispatch(addRepetitions(repetitions))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Repetitions);

RepetitionsComponent.ts
注意：当我尝试 console.log “repetitions”时，我现在变得不确定。

import React from "react";
import { RepetitionsProps } from "../../containers/reps/Repetitions";

const Repetitions: React.FunctionComponent<RepetitionsProps> = ({ 
  repetitions, 
  updateRepetitions
}) => {
  console.log(repetitions)
  return (
    <div>
      <h3>Reps</h3>
      <input
        onChange={(event) => updateRepetitions(Number(event.target.value))}
        value={ repetitions } // <-- This is the value i'm wanting to present to the user from the redux store
      />                         
    </div>
  );
};

export default Repetitions;

App.ts

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import Header from "./components/header/Header";
import { Provider } from "react-redux";
import { createStore } from "redux";
import Counter from "./containers/example/Counter";
import Repetitions from "./containers/reps/Repetitions";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from "./store/reducer";

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

console.log(store.getState())

function App() {
  return (
    <div className="App">
      <Header title={"Rep count"} />
      <Repetitions />
      <br />
      <br />
      <br />
      <Counter />
    </div>
  );
}


const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

当用户首次加载页面时，我希望看到的预期结果将是“0”显示在“Reps”标题下方的输入框中。相反，该框是空的，但 redux 存储将重复值显示为“0”。

reps-input-desired-results

还值得注意的是，当我第一次加载页面时，输入字段下方的计数器用于从 redux 存储中读取“0”，但现在它也未定义。

感谢您花时间看我的帖子。任何帮助将不胜感激！

Answer 1

嗯……这里出了点问题：

首先，您的重复状态当前是持有一个对象。它应该包含一个简单的数字。

其次，商店中重复状态的名称（来自您附加的快照）是“repetitionReducer”而不是“repetition”，因为您尝试在 mapStateToProps 中获取它：

const mapStateToProps = (state: RootState): StateFromProps => ({
  repetitions: state.repetitions // <- this one here...
});

希望这会有所帮助:)