Question

简单的待办事项应用- 我需要从容器/组件中检索输入值并将其存储在redux状态。输入值一直以本地状态存储，直到用户按下“添加”按钮为止。

我的问题是：我该如何通过分派/操作将此输入值向上传递，然后检索该值以供我的减速器处理。

const mapStateToProps = state => ({
    ...state
})
const mapDispatchToProps = dispatch => ({
    addTodo: () => dispatch(addTodo())
})


class Main extends React.Component {

    state = {
        input: ''
    }

    handleInputChange = (e) => {
        e.preventDefault();
        this.setState({
            input: e.target.value
        })
    }

    addTodo = (e) => {
        this.props.addTodo(this.state.input);
    }

    render() {
        return(
            <div className='Main'>

                <div className='head'>
                    <input onChange={this.handleInputChange} type="text"/>
                    <button onClick={this.addTodo}>Add</button>
                </div>

            </div>
        )
    }
}

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

这是动作：

export const addTodo = () => dispatch => {

    dispatch({
     type: 'ADD_TODO',
     payload
    })

}

这是减速器：

export default (state = {}, action) => {

    switch (action.type) {
     case 'ADD_TODO':
      return {
       result: action.payload
      }
     default:
      return state
    }

}

我只是迷失了如何使用我的减速器移动这些数据以对其进行操作。

Answer 1

您当前实际上并没有将输入值传递给操作。

您需要将操作创建者和mapDispatchToProps函数都更改为以下内容：

export const addTodo = (payload) => dispatch => {

    dispatch({
     type: 'ADD_TODO',
     payload
    })

}

const mapDispatchToProps = dispatch => ({
    addTodo: (input) => dispatch(addTodo(input))
})

从输入中检索数据并传递到redux状态

1 个答案: