Question

我正在尝试将React组件连接到Action创建器并将调度操作连接到reducer并呈现数据。我使用Redux作为状态管理。我不确定为什么它不是控制台记录，因为它显示我连接的动作创建者很好。

另外，我想知道您是否愿意将redux promise用作中间件或redux thunk？

SearchBar.js

        import React, { Component } from 'react';
        import { connect } from 'react-redux';
        import { searchArtist } from './actions';

        class SearchBar extends Component{
            constructor(){
                super();
                this.state = {
                    query:'test'
                }
                this.handleChange = this.handleChange.bind(this);
                this.clearForm = this.clearForm.bind(this);
                // this.searchArtist = this.searchArtist.bind(this);
            }

            clearForm(e){
                this.setState({
                    query:''
                })
            }

            handleChange(e){
                this.setState({
                    query:e.target.value
                });
            }
            render(){
                console.log(this.props)
                return (
                    <div>
                        <form onSubmit={this.props.searchArtist}>
                            <label>Search For Your Favourite Song</label>
                            <input type="text" value={this.state.query} onClick={this.clearForm} onChange={this.handleChange}/>
                            <input type="submit" value="Submit"/>
                        </form>
                    </div>
                )
            }
        }

        function mapStateToProps(state){
            return{
                search:state.search
            }
        }

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

动作创作者

index.js

        import axios from 'axios';
        import { FETCH_API } from './types';

        export function searchArtist(term){
            const request = axios.get(`https://api.spotify.com/v1/artists/{term}`);
            return{
                type: FETCH_API,
                payload:request
            }
        }

存储

        import React from 'react';
        import ReactDOM from 'react-dom';
        import './index.css';
        import App from './App';
        import registerServiceWorker from './registerServiceWorker';
        import { Provider } from 'react-redux';
        import reducers from './reducers';
        import { createStore, applyMiddleware } from 'redux';
        import reduxThunk from 'redux-thunk';

        const store = createStore(reducers, {}, applyMiddleware(reduxThunk));

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

Answer 1

connect声明应为

const values = ['Brussels', 'Cairo', 'Casablanca', 'Cangzhou', 'Caracas',
    'Los Angeles', 'Osaka'];

const match = (s) => {
  const p = Array.from(s).reduce((a, v, i) => `${a}[^${s.substr(i)}]*?${v}`, '');
  const re = RegExp(p);
  
  return values.filter(v => v.match(re));
};

console.log(match('Ca'));    // Cairo, Casablanca, Cangzhou, Caracas
console.log(match('Caz'));   // Cangzhou
console.log(match('as'));    // Casablanca, Caracas
console.log(match('aa'));    // Casablanca, Caracas, Osaka

由于export default connect(mapStateToProps,mapDispatchToProps)(SearchBar);的顺序错误，mapDispatchToProps没有映射到function/action。因此不会调用任何操作，因此不会container。 Hense，reducers没有记录任何内容。

Answer 2

在Riyaj Khan的回答中添加更多内容，您应该通过交换mapStateToProps和maoDispatchToProps的位置来更正connect的语法，您必须将一些内容发送到redux。即使您使用的是承诺中间件，您也必须发出承诺。

在你的情况下，searchArtist()是你打算使用的调度函数，但它应该在以下函数中定义。例如，

function mapDispatchToProps(dispatch) {
    return({
        searchArtist: () => {dispatch({type:"SEARCH", payload:new Promise()})}
    })
}

Answer 3

我建议清理动作创建者。只是传递请求有点不可预测，

可以做这样的事情

export function fetchArtist(term){
 fetch(`${API_URL}/${term}`)
  .then((response) => {
  if(!response.ok) {
    throw Error(response.statusText);
  }
  return response;
  }).then((data) => data.json())
    .then((artists) => dispatch(termSuccess(artists)))
    .catch((err) => dispatch(termError(err)))
 };

这是使用redux thunk，因为我能够使用函数进行调度。因此，对于其他动作创建者，您最终会创建termSuccess，termLoading，termError。有助于使事情更有条理，而不是将其全部放在一个动作创建者中。

Action Creator和Reducer不是console.logging，但组件已连接

3 个答案: