React-Redux：如何将Reducer与Thunk中间件结合

Question

I started coding a web interface to manage my server's files using React/Redux.
I now have a page which requests my API to get files list as JSON.

It works well so I added another reducer and an action button to simply display the filename on click.
But combining my datalist-reducer with the active-file reducer doesn't work.
The files list creation process fails with the following error:

TypeError: Undefined is not a function (near'...this.props.datalist.map...')

Thank you.

Here's my code :

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware, combineReducers} from 'redux';
import {Provider, connect} from 'react-redux';
import thunk from 'redux-thunk';
import activeFileReducer from './reducers/reducer-active-file';
import dataListReducer from './reducers/reducer-data';

const reducer = combineReducers({
    datalist: datalist, 
    activefile: activefile
})
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let store = createStoreWithMiddleware(reducer);
ReactDOM.render(<Provider store={store}>
    <App />
    </Provider>, document.getElementById('table'));

datalist-reducer

export default function datalist (state = {}, action) {
    switch (action.type) {
        case "FETCH_REQUEST":
            return state;
        case "FETCH_SUCCESS": 
            return {datalist: action.payload};
        default:
            return state;
    }
}

active-file-reducer

export default function activefile (state= {}, action){
        switch(action.type){
            case "FILE_SELECTED":
                return action.payload;
            default:
                return state;
        }

    }

actions/index.js

export const selectFile = (file) => {
    return {
        type: "FILE_SELECTED",
        payload: file
    }
}


export const fetchDataRequest = () =>{
    return {
      type: "FETCH_REQUEST"
    }
}

export const fetchDataSuccess = (payload) => {
    return {
        type: "FETCH_SUCCESS",
        payload
    }
}

export const fetchDataError = () => {
    return {
        type: "FETCH_ERROR"
    }
}

data-list-container

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {fetchDataRequest, fetchDataSuccess, fetchDataError, selectFile} from '../actions/index';

class DataList extends Component{
    componentDidMount(){
        this.props.fetchDataWithRedux()

    }

    render(){
        return(
            <ul>
                {
                    this.props.datalist && 
                    this.props.datalist.map((item, key) =>{
                        return(
                            <li key={key} onClick={() => this.props.selectFile(item.title)}>{item.title}</li>
                        )
                    })
                }
            </ul>
        )       
    }
}


function fetchDataWithRedux() {
    return (dispatch) => {
        dispatch(fetchDataRequest());
        return fetchData().then(([response, json]) =>{
            console.log(response);
            if(response.status === 200){
            dispatch(fetchDataSuccess(json))
            dispatch(selectFile())
    }
    else{
        dispatch(fetchDataError())
        dispatch(selectFile())
    }
    })
}
}

function fetchData() {
const URL = "http://localhost:5000/api/deposit/view";
return fetch(URL, { method: 'GET'})
    .then( response => Promise.all([response, response.json()]));
}

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

export default connect(mapStateToProps, {fetchDataWithRedux})(DataList);

Answer 1

Try changing your index.js file to something like:

 import { createStore, applyMiddleware, combineReducers } from 'redux'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import ReactDOM from 'react-dom'; import App from './App'; const reducer = combineReducers({ datalist: datalist, activefile: activefile }); // Note: this API requires redux@>=3.1.0 const store = createStore( reducer, applyMiddleware(thunk) ); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('table') ); 

NB: Added in missing imports (some guessed) for completeness.

Edit: Now that your reducers are combined, you need to amend your datalist reducer:

 // datalist-reducer export default function datalist (state = [], action) { switch (action.type) { case "FETCH_REQUEST": return state; case "FETCH_SUCCESS": return action.payload || []; default: return state; } } 

This is because, your datalist reducer will be given the datalist key from your store, and your state will be the contents of that key (or undefined on the first run).