Question

我创建了一个输入字段，并在该输入字段的onChange方法中调度一个动作。我有一个状态属性文本：“一旦用户开始在输入字段中输入但不会发生，状态应该会更新，相反，一旦在Redux Dev工具中选中了操作，状态中的文本属性就会消失。

也有以下2个查询-阅读文档，但仍不清楚

为什么我们必须在createStore中传递initialState，因为我已经将状态传递给了reducers，尽管已经将空的initialState传递给了createStore。
我是否需要使用mapStateToProps，因为我没有在组件中使用任何状态

操作文件-searchActions.js

import { SEARCH_MOVIE } from "./types";

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

Reducer文件-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;

存储文件-store.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传递给reducer，实际上您不能。 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

我在商店中的状态未更新，而是状态动作在Redux开发工具中检查后触发操作后消失了

1 个答案: