如何在异步 HTTP 请求中使用 react-redux 存储

Question

I'm trying to update a div with a number using an AJAX call. Here's the widget:

import {store} from './Store';

class Widget extends React.Component {
    constructor(props) {
        super(props);
    }
    componentWillMount() {
        let req = function() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', this.props.apiUrl, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.response) {
                        store.dispatch({
                            type: 'SET_STATE',
                            state: {
                                foo: JSON.parse(xhr.response)
                            }
                        });
                    }
                }
            }.bind(this);
            xhr.send();
        }
        req.call(this);
    }
    render() {
        return(
            <widget>
                <div>{this.props.foo}</div>
            </widget>
        );
    }
}

Heres the "reducer":

import {List, Map} from 'immutable';
export default function(state = Map(), action) {
    switch(action.type) {
        case 'SET_STATE':
            return state.merge(action.state);
    }
    return state;
}

And here's the store:

import {createStore} from 'redux';
import reducer from '../reducer';

export const store = createStore(reducer);

When I run this code, I get the page to load, but foo is undefined. The request returns a response with the correct data. dispatch() is being called correctly. How do I trigger a state change asynchronously that propagates throughout the entire app?

NOTE

Please, please, please do not forward me to verbose abstract blog posts like this or this . I need an actual working example of code that triggers a state change using store.dispatch() . Thanks.

Answer 1

As Azium mentioned in the comments, you don't need redux-thunk to do this, however this is how you would.

You apply redux-thunk middleware to your store:

var thunk = require('redux-thunk');
const store = createStore(
    combineReducers({
        reducer1,
        reducer2
    }),
    applyMiddleware(thunk)
);

Then you can define actions like this:

export const getData = () => {
    return (dispatch) => {
        return fetch('/foo')
            .then((response) => response.json())
            .then((json) => dispatch(receieveData(json)));
    };
};

Where receieveData is another action that you have defined.

Now you could call this action in componentWillMount . I might have missed something, but that's the gist of it. It's all in the first link from your original post ( http://redux.js.org/docs/advanced/AsyncActions.html ).

Edit: and of course, as many have said already, you need react-redux :)

Answer 2

I found out what was wrong. I was not setting the initial state.

// Store.jsx

import {fromJS} from 'immutable';
import {createStore} from 'redux';
import reducer from '../reducer';

export const store = createStore(reducer);
store.dispatch({
    type:'SET_STATE',
    state: fromJS({
        foo: 0
    })
})

Without this, the state being updated was always null . This simple fact was not in any of the official React/Redux documents.