Мое состояние в магазине не обновляется, скорее атрибут атрибута исчезает после запуска действия, как проверено в Redux dev tool

Question

Я создал поле ввода и отправляю действие в методе onChange поля ввода. У меня есть текст атрибута состояния: '', который должен обновляться, как только пользователь начинает вводить в поле ввода, но этого не происходит, вместо этого текстовый атрибут в состоянии исчезает, как только запускается действие, как проверено в Redux Dev tool.

Также есть ниже 2 запросов - читать документы, но все еще не ясно

1. Почему мы должны передавать initialState в createStore, поскольку я уже передал в состояние редукторам, хотя и прошел пустойinitialState to createStore.

2. Нужно ли использовать mapStateToProps в моем случае, поскольку я не использую какое-либо состояние в моем компоненте

Действиеfile - searchActions.js

import { SEARCH_MOVIE } from "./types";

export const searchMovie = text => ({
  type: SEARCH_MOVIE,
  payload: text
});

Файл редуктора - searchReducer.js

import { SEARCH_MOVIE } from "../actions/types";

const initialState = {
  text: ""
};

const searchReducer = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
    case SEARCH_MOVIE:
      return {
        ...state,
        text: action.payload
      };
    default:
      return state;
  }
};

export default searchReducer;

Файл корневого редуктора - index.js

import { combineReducers } from "redux";
import searchReducer from "./searchReducer";

const rootReducer = combineReducers({
  searchReducer
});

export default rootReducer;

Хранить файл - хранить. js

import { createStore } from "redux";

import rootReducer from "./reducers";

const initialState = {};

const store = createStore(
  rootReducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

Форма, содержащая поле ввода - SearchForm.js

import React, { Component } from "react";
import { searchMovie } from "../../actions/searchActions";

import { connect } from "react-redux";

export class SearchForm extends Component {
  onChange = e => {
    this.props.searchMovie(e.target.value);
  };
  render() {

    return (
      <div className="jumbotron jumbotron-fluid mt-5 text-center">
        <form className="form-group">


<input
        type="text"
        className="form-control"
        placeholder="Search Movies"
        onChange={e => this.onChange(e)}
      ></input>
      <button type="submit" className="btn btn-primary mt-3 btn-bg">
        Search
      </button>


         </form>
          </div>
        );
      }
    }

    const mapStateToProps = state => {
      return {
        text: state.text
      };
    };

    const mapDispatchToProps = dispatch => ({
      searchMovie: () => dispatch(searchMovie())
    });

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

Файл ввода - App.js

import React, { Component } from "react";
import { Provider } from "react-redux";

import SearchForm from "./SearchForm";
import store from "./store";

import "./App.css";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <SearchForm />
      </Provider>
    );
  }
}

export default App;

Answer 1

Вы вызываете эту функцию с параметром

this.props.searchMovie(e.target.value);

Однако здесь вы не предоставляете никаких параметров

const mapDispatchToProps = dispatch => ({
    searchMovie: () => dispatch(searchMovie())
});

должно быть

const mapDispatchToProps = dispatch => ({
    searchMovie: movie => dispatch(searchMovie(movie))
});

Для вашеговопросы

1. Why do we have to pass initialState in createStore as I have already passed in state to reducers , though have passed empty initialState to createStore .

Вы не передали initialState редуктору, фактически вы не можете. Это отличается const searchReducer = (state = initialState, action) => {. Это синтаксис javascript, который действует как значение по умолчанию для параметра, если вы его не предоставите.

2. Do I need to use mapStateToProps in my case as I am not making use of any state in my component

Да, вам не нужно. Вы можете установить как undefined