Question

其中一个Redux教程决定为只有登录部分的简单应用程序实现那个简短的action->reducer->store->view链。

似乎所有设置但是当我运行我的应用程序时 - 在mapStateToProps(currentState)中没有任何我希望看到的任何自定义状态字段的迹象！（默认状态来自reducer）。但是动作功能很好，你可以在屏幕截图中看到

我在这里看不出什么错，所以决定问一下。

所以这是代码

所以，首先 - store.js

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

export default function configureStore(initialState) {
    const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

    if (module.hot) {
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers');
            store.replaceReducer(nextRootReducer);
        });
    }

    return store;
}

然后login reducer

const initialState = {
    user: {
        name: '',
        password: ''
    },
    fetching: false
}

export default function login(state = initialState, action) {
    switch (action.type) {
        case LOGIN_REQUEST: {
            return { ...state, fetching: true }
        }
        case LOGIN_SUCCESS: {
            return { ...state, user: action.data, fetching: false }
        }
        case LOGIN_FAIL: {
            return { ...state, user: -1, fetching: false }
        }
        default: {
            return state;
        }
    }
}

和根（reducers/index.js）：

import login from './login/login';
import { combineReducers } from 'redux'

export default combineReducers({
    login
});

action

import {
    LOGIN_REQUEST,
    LOGIN_SUCCESS,
    LOGIN_FAIL
} from '../../constants/login.js';

export function onLoginAttempt(userData) {
    return (dispatch) => {
        dispatch({
            type: LOGIN_REQUEST,
            user: userData
        })

        tryLogin(userData);
    }
};

function tryLogin(userData) {
    let url = 'SignIn/Login ';

    return (dispatch) => {
        axios.post(url, userData)
            .then((response) => dispatch({
                type: LOGIN_SUCCESS,
                data: response.data
            })).error((response) => dispatch({
                type: LOGIN_FAIL,
                error: response.error
            }))
    }
};

所以这是入口点：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/app.js';
import configureStore from './store/configureStore';

let store = createStore(configureStore);

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

这里是app.js（登录只是sompe自定义div，两个字段没什么特别的）

import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import Login from '../components/login/Login';
import * as pageActions from '../actions/login/login'


class App extends Component {
    render() {
        const { user, fetching } = this.props;
        const { onLoginAttempt } = this.props.pageActions;

        return <div>
            <Login name={user.name} password={user.password} fetching={fetching} onLoginAttempt={onLoginAttempt} />
        </div>
    }
}

function mapStateToProps(currentState) {
    return {
        user: currentState.user,
        fetching: currentState.fetching
    }
}

function mapDispatchToProps(dispatch) {
    return {
        pageActions: bindActionCreators(pageActions, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

Answer 1

我看到你的状态如下：

reduxState = {
   login: {
       user: {
         name: '',
         password: ''
       },
       fetching: false
   }
}

但是您尝试访问不存在的属性。

function mapStateToProps(currentState) {
    return {
        user: currentState.user,
        fetching: currentState.fetching
    }
}

我认为你需要：

function mapStateToProps(currentState) {
    return {
        user: currentState.login.user,
        fetching: currentState.login.fetching
    }
}

Answer 2

您的入口点上有这一行let store = createStore(configureStore);。但是，在configureStore内，您可以调用createStore()

基本上你在调用类似createStore(createStore(reducers))的东西。这可能是问题的原因。

您应该将其称为

let store = configureStore( /* pass the initial state */ )

React + Redux绑定状态没有数据

2 个答案: