Реакционный компонент представления не может прочитать значение для <input /> из хранилища примитивов, используя контейнер реагирования - PullRequest
0 голосов
/ 20 апреля 2019

Я новичок в stackoverflow и довольно плохо знаком с использованием response / redux.Я уже просмотрел несколько постов, чтобы посмотреть, сможет ли аналогичный пост дать мне ответ, но я все еще озадачен.

У меня в настоящее время есть презентационный компонент «Повторения» и контейнерный компонентполучить реквизит из хранилища резервов и отправить действия из презентационного компонента в хранилище резервов.У меня есть презентационный компонент, обновляющий хранилище редуксов при вводе данных в поле ввода, но я хочу использовать хранилище редуксов для получения входного значения, чтобы при первом входе пользователя на страницу входное значение равнялось 0это начальное значение в хранилище приставок.

Изначально я создал простой компонент Counter с использованием response / 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, в настоящий момент я получаю неопределенное значение.

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», когда пользователь впервые загружает страницу.Вместо этого поле пустое, но в хранилище редуксов значение для повторений отображается как «0».

reps-input-требуемый-результаты

Стоит также отметить, чтоСчетчик под полем ввода использовался для чтения «0» из хранилища приставок, когда я впервые загрузил страницу, однако теперь она также не определена.

Спасибо, что нашли время взглянуть на мой пост.Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 20 апреля 2019

Хммм ... что-то здесь не так:

Прежде всего, ваше состояние для повторения в настоящее время содержит объект. Он должен содержать простое число.

Во-вторых, имя состояния повторения в хранилище (из прикрепленного снимка) - «repetitionReducer», а не «повторение», когда вы пытаетесь получить его в mapStateToProps:

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

Надеюсь, это поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...