如何在 redux state 中保存搜索词？

Question

I'm learning redux by using it with a react app that pulls articles from the Hacker News API.

I want to save the search terms inputted in the search bar to the redux state, but when I look at the state, the searchTerm state I have made is empty in redux devtools.

Here is my search bar component:

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import getSearchTerm from '../actions/searchAction';

class Search extends Component {
constructor(props) {
    super(props);
    this.state = {
        searchTerm: ''
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
}

onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
}

onSubmit(e) {
    e.preventDefault()
    const searchTerm = this.state.searchTerm

    this.props.getSearchTerm(searchTerm);
}

render() {
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                <input
                    type="text"
                    name="searchTerm"
                    style={{
                        width: "95%",
                        paddingTop: 8,
                        paddingBottom: 8,
                        paddingLeft: 16,
                        fontSize: 24
                    }}
                    placeholder="Enter term here" onChange={this.onChange}
                    value={this.state.searchTerm} />
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}
}


Search.propTypes = {
    searchTerm: PropTypes.string.isRequired
}

const mapPropsToState = state => ({
    getSearchTerm: state.searchTerm
})

export default connect(mapPropsToState, { getSearchTerm })(Search)

Here is the action I am using to save the search term:

export const getSearchTerm = term => dispatch => {
console.log('action called')
dispatch({
    type: GET_TERM,
    term
})
}

And here is the reducer:

import GET_TERM from '../actions/types';

const initState = {
    searchTerm: null
}

export default function (state = initState, action = {}) {
    switch (action.type) {
        case GET_TERM:
            return {
                searchTerm: action.term
            }
        default:
            return state
    }
}

I am also getting a warning in my console saying:

'Failed prop type: The prop searchTerm is marked as required in Search , but its value is undefined .'

Obviously, this means the search term I have required is undefined because I have it as undefined in the reducer. However, I want to save the search term I enter into the redux state. How do I go about this?

Answer 1

Can your check if your reducer is getting it. Just console.log() it before returning new state in your reducer.

Also use should always spread the state in every return in order to ensure that your overall state doesn't get overwritten.

Posted as I don't have comment privileges.