javascript - mapStateToProps不更新

我才刚刚开始玩react/redux。我只想输入一些文本，然后单击“提交”，然后将其传递给另一个组件，该组件将显示输入的内容。

我知道我可以从A点到B点获取数据，因为如果我使用store.subscribe，那么我可以访问状态，并且它总是准确的。我正在尝试使用mapStateToProps，但我没有任何运气。

我没有使用mapDispatchToProps，所以这可能是个问题吗？我似乎找不到一个简单的例子。 mapStateToProps似乎也仅在刷新页面(使用webpack-dev-server)时运行，因为它仅记录一次页面加载，而不再记录。

_______________ Input.js _________________

import React from 'react';
import store from '../redux/store';
import { connect } from 'react-redux';
import { addSearchParam } from '../redux/actions';

export default class Input extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      player: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      player: event.target.value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    store.dispatch(addSearchParam(this.state.player))
  }

  render() {
    return ( <form onSubmit = {this.handleSubmit} >
      <label>
          <input type="text" value={this.state.player}
          onChange={this.handleChange}/>
      </label>
      <input type="submit" value="Submit" />
      </form>
    );
  }
}


_______________ Info.js _________________


import React from 'react';
import store from '../redux/store';
import { connect } from 'react-redux';

class Info extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
        <h2> {this.props.player}</h2>
    )
  }
}

function mapStateToProps(state) {
  console.log("mapStateToPropsInfo: ", state)
  return {
    player: state.player
  }
}

export default connect(mapStateToProps, null)(Info);


_______________ reducers.js _________________

'use strict';

import {
  combineReducers
} from 'redux';

const SEARCH_PARAM = 'SEARCH_PARAM';

const searchReducer = (state = '', action) => {
  if (action.type === SEARCH_PARAM) {
    return action.text;
  }
  return state;
}

export const reducers = combineReducers({
  searchReducer
})

export default reducers;


_______________ actions.js _________________

'use-strict';

export const addSearchParam = input => {
  return {
    type: 'SEARCH_PARAM',
    id: 'player',
    text: input
  }
}

_______________ index.js _________________
'use-strict';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './js/redux/reducers'

let store = createStore(reducers)

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

这些文件似乎是与此问题有关的最重要的文件，但如有必要，我可以提供更多文件。谢谢你的帮助。希望我只是缺少一些简单的东西。

最佳答案

我认为问题在于您已经编写了actions，但从未使用/连接它。您需要才能在mapDispatchToProps中使用Input.js。

首先将action导入input.js中，如下所示:

import { addSearchParam } from './actions';

像这样编写mapDispatchToProps函数:

function mapDispatchToProps(dispatch){
    return bindActionCreators({addSearchParam}, dispatch);
}

然后，在Input.js函数的handleSubmit内部执行此操作:

this.props.addSearchParam(this.state.player)

另外，不要在清除时导出类，而是将Input.js的export语句更改为也绑定(bind)mapDispatchToProps:

export default connect(null, mapDispatchToProps)(Input);

关于javascript - mapStateToProps不更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47544862/