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);

我不知道这是否重要，但我正在使用样式组件进行样式设计。我尝试删除了combineReducers方法，并只保留了一个减速器，但没有帮助。

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

Answer 1

似乎您没有在操作中设置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
    }

Answer 2

答案很简单。我在做：

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） 抱歉浪费您的时间，感谢您的所有答复！

React Redux状态未更新

2 个答案: