Question

我有异步的减速器：

const initUserState = {
    fetching: false,
    fetched: false,
    users: [],
    error: null
};

const userReducer = (state = initUserState, action) => {
    switch(action.type){
        case "FETCH_USER":
            state = {
                ...state,
                users : action.payload
            };
            break;
        case "FETCH_USER_START":
            state = {
                ...state,
                fetching: true
            };
            break;
        case "FETCH_USER_SUCCESS":
            state = {
                ...state,
                fetched: true,
                users: action.payload
            };
            break;
        case "FETCH_USER_ERROR":
            state = {
                ...state,
                fetched: false,
                error: action.payload
            };
            break;
        default: 
            break;
    }
    return state;
};

export default userReducer;

我的容器是：

import React from 'react';
import { Blog } from '../components/Blog';
import { connect } from 'react-redux';
//import { act_fetchAllUser } from '../actions/userActions';
import axios from 'axios';

class App extends React.Component {

    componentWillMount(){
        this.props.fetchAllUser();
    }

    render(){
        console.log("Prop: " , this.props.user);
        return(
            <div>
                <h1>My Blog Posts</h1>
                <Blog/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.userReducer
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchAllUser: () => {
            dispatch((dispatch) => {
                dispatch({ type: "FETCH_USER_START" })
                axios.get('http://infosys.esy.es/test/get_allBlog.php')
                .then((response) => {
                    dispatch({
                        type: "FETCH_USER_SUCCESS",
                        payload: response.data
                    });
                })
                .catch((err) => {
                    dispatch({
                        type: "FETCH_USER_ERROR",
                        payload: err
                    });
                })
            });
        }
    };
};

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

我是redux的新手，我现在变成了异步... 我的应用程序应该在页面加载时加载用户，但为什么我的用户状态返回未定义状态？在render方法中，我正在记录包含userReducer（mapStateToProps）返回状态的用户道具，但我得到了未定义。但是当我在商店中使用getState（）并记录它时，我得到了预期的结果，但它不是让状态正确的理想场所吗？......我做错了什么？

我的商店是：

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import userReducer from './reducers/userReducer';
import thunk from 'redux-thunk';

const store  = createStore(userReducer,applyMiddleware(thunk, logger()));
//store.subscribe(() => console.log('State: ',store.getState()));

export default store;

我的索引是：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './container/App';

import { Provider } from 'react-redux';
import store from './store';

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

另外，在userReducer的默认情况下，我应该在那里编码...我应该打破;还是我还需要返回状态呢？谢谢

Answer 1

你应该有;

No appropriate method, property, or field

Answer 2

mapStateToProps将状态（全局存储）作为道具传递给组件。

全球商店

const initUserState = {
    fetching: false,
    fetched: false,
    users: [],
    error: null
};

内部组件监听用户状态

const mapStateToProps = (state) => {
    return {
        user: state.users
    };
};

mapStateToProps从reducer返回undefined状态

2 个答案: