时间戳

首页 > 解决方案 > Action Creator 和 Reducer 不是 console.logging，但组件是连接的

reactjs - Action Creator 和 Reducer 不是 console.logging，但组件是连接的

问题描述

我正在尝试将 React 组件连接到动作创建者并将动作分派给减速器并渲染数据。我使用 Redux 作为状态管理。我不确定为什么它不是控制台日志记录，因为它显示我连接的动作创建者很好。

另外我想知道你宁愿使用 redux promise 作为中间件还是 redux thunk？

搜索栏.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();

标签： reactjsreduxactionstate

解决方案

connect声明应该是

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

正如 mapDispatchToProps以错误的顺序指定的那样，没有function/action映射到container.As 结果没有调用任何动作，所以没有reducers。Hense，action & reducers没有记录任何东西。

推荐阅读