mapStateToProps不更新

Question

I am just beginning to play with react/redux. I just want to input some text and hit submit and then pass that to another component that will display whatever was input.

I know I can get the data from point A to B because if I use store.subscribe than I can access the state and it is always accurate. I am trying to use mapStateToProps though and I am not having any luck.

I am not using mapDispatchToProps so maybe that is an issue? I cant seem to find a good simple example. mapStateToProps also only seems to run when I refresh the page (using webpack-dev-server) since it only logs one time on page load and never again.

 _______________ 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') ); 

Those seem to be the most important files related to this problem but I can provide more if necessary. Thanks for any help. Hopefully im just missing something simple.

Answer 1

I think the issue is that you have written actions but never used/connected it. You need to use mapDispatchToProps in Input.js .

First import the action in input.js like this:

import { addSearchParam } from './actions';

Write mapDispatchToProps function like this:

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

Then, inside Input.js in handleSubmit function do this:

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

Also, instead of exporting class while declearing, change export statement of Input.js to also bind the mapDispatchToProps :

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