React Redux 状态未更新

Question

请帮助我解决有关 react-redux 的情况。 我在更新状态（我尝试以不可变的方式进行）和我使用它的组件时遇到问题，从不重新渲染。

/store/users/index.js

import { USER_LOGIN, USER_LOGOUT} from './actionTypes';

import {
    USER_LOGIN,
    USER_LOGOUT
} from './actionTypes';

const usersReducer = (user = {}, action) => {
    switch(action) {
        case USER_LOGIN : /* tried to change id manually, not based on payload, just to see if it works */
            return {
                ...user, 
                name: 'New user',
                isLoggedIn: true
            }
        case USER_LOGOUT: 
            return {
                ...user,
                name: 'Anonymous',
                isLoggedIn: false
            }
        default:
            return user;
    }  
}
export default usersReducer;

/store/loops/index.js

import {
    LOOPS_ADD
} from './actionTypes';
const loopsReducer = (loops =[], action) => {
    switch(action) {
        case LOOPS_ADD:
            return [
                ...loops,
                action.payload
            ]
        default:
            return loops;
    }
}
export default loopsReducer;

/store/users/actions.js

import {
    USER_LOGIN,
    USER_LOGOUT
}
from './actionTypes';

export const userLogin = (newUser) => {
    return {
        type: USER_LOGIN,
    }
}

export const userLogout = () => {
    return {
        type: USER_LOGOUT
    }
}

/store/index.js

import {
    createStore, 
    combineReducers, 
    applyMiddleware, 
    compose
} from 'redux';
/* import reducers */
import usersReducer from './users';
import loopsReducer from './loops';

/* import middleware */
import logger from 'redux-logger';

/* initial state */
const initialState =  {
    user: {
        name: 'Anonymous',
        isLoggedIn: false,
        email: null,
        lastLogin: null,
        firstTimeLogin: false,
        authProvider: 'email',
        friendsCount: null
    },
    loops: []
}

/* reducers */
const rootReducer = combineReducers({
    user: usersReducer,
    loops: loopsReducer,
});

/* store creation */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const middleware = composeEnhancers(applyMiddleware(logger));

const store = createStore(
    rootReducer,
    initialState,
    middleware
);

export default store;

/pages/HomeScreen/HomeScreen.js

import React from 'react';
import {connect} from 'react-redux'
import {userLogin} from '../../store/users/actions';

class Home extends React.PureComponent {
    render() {
        return (
            <React.Fragment>
                <NavBar>Nav</NavBar>
                <Listing>
                    <Filter>Filter</Filter>
                    <Card>
                        <CardAvatar>Avatar</CardAvatar>
                        <CardBody>Rest of the card</CardBody>
                        Salut {this.props.name}
                        <button onClick={() => this.props.login()}>login</button>
                    </Card>
                </Listing>
            </React.Fragment>
        )
    }
}
const mapStateToProps  = (state) => {
    return {
        name: state.user.name
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        login: () => dispatch(userLogin()),
    }
}

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

我不知道这是否重要，但我正在使用 styled-components 进行样式设置。 我尝试删除 combineReducers 方法，并保留单个减速器，但没有帮助。

我尝试删除react-logger 中间件，我尝试使用Immutable.js，但即使触发了操作，redux 状态也不会更新，并且 Home 组件也不会重新渲染。

Answer 1

答案很简单。 我在做：

const loopsReducer = (loops =[], action) => {
    switch(action) {
        case LOOPS_ADD:
            return [
                ...loops,
                action.payload
            ]
        default:
            return loops;
    }
}

我应该这样做

const loopsReducer = (loops =[], action) => {
    switch(action.type) {
        case LOOPS_ADD:
            return [
                ...loops,
                action.payload
            ]
        default:
            return loops;
    }
}

注意 switch(action.type) 之前的 switch(action) 很抱歉浪费您的时间，感谢您的所有回复！

Answer 2

您的操作似乎没有设置user：

export const userLogin = (newUser) => {
    return {
        type: USER_LOGIN,
    }
}

看起来应该是：

export const userLogin = (newUser) => {
    return {
        type: USER_LOGIN,
        user: newUser
    }
}

没有这个，状态不会发生变化，也不需要渲染。

当然，你需要改变你的 reducer 函数，使它是动态的：

case USER_LOGIN : 
    return {
        ...user, 
        name: action.user.name,
        isLoggedIn: true
    }