Question

我希望用户能够将文本输入到输入框中并基于此想要搜索api。我正在使用redux和redux-thunk。我不确定如何将作为参数输入的文本传递给API调用。

如果我没有使用redux和thunk，我会将组件的状态设置为

this.state = {
    movie: ''
}

然后在input type=text我会使用movie更新onChange值e.target.value。使用与redux反应时应采取的方法是什么？

我的代码如下所示。

import React, {Component} from 'react';
import {render} from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider, connect} from 'react-redux';
import thunk from 'redux-thunk';
import axios from 'axios';

function reducer(state = 0, action) {
  switch (action.type) {
    case 'GET_MOVIE':
      return action.data;
    default:
      return state;
  }
}

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);


class App extends Component {

    getMovie(){
        this.props.getMovie();
    }

    render() {
        return(
            <div>
                <input type='text'>
                <input type='submit' onClick={this.props.getMovie}>
            </div>
        )
    }
}

function getMovie(movie){
    return function(dispatch) {
        axios.get('http://www.omdbapi.com/?t=' + movie)
        .then(function(data){
            dispatch(resolvedGetMovie(data.data));
        })
    }
}

function resolvedGetMovie(data){
    return {
        type: '
          GET_MOVIE ',
        data: data
    }
}

function mapStateToProps(state) {
    return {
        movie: state
    }
}

function mapDispatchToProps(dispatch) {
    return {
        getMovie : () => dispatch(getMovie())
    }
}

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

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

Answer 1

开始使用redux时，很容易被带走并将所有应用程序状态放在reducer中。但是，对于表单字段，UI相关状态以及仅与特定组件相关的其他状态，将其存储在component的状态中可能是有益的。对于您提供的示例，您应该跟踪组件状态中的input值，然后将该值传递给您的操作（getMovie）

例如：

class App extends Component {
    constructor(props) {
        this.state = {
            movie: ''
        }        
    }

    handleChange(e) {
        this.setState({
            movie: e.target.value
        });
    }

    handleSubmit() {
        const {movie} = this.state;
        this.props.getMovie(movie);
    }

    render() {
        const {movie} = this.state;

        return(
            <div>
                <input
                    type='text'
                    onChange={this.handleChange.bind(this)}
                    value={movie}
                />
                <input type='submit' onClick={this.handleSubmit.bind(this)}>
            </div>
        )
    }
}

将参数传递给在react-redux

1 个答案: