Реакция состояния Redux не обновляется - PullRequest
Новая
       6

Реакция состояния Redux не обновляется

0 голосов
/ 03 января 2019

, пожалуйста, помогите мне с ситуацией вокруг реакт-редукса.У меня есть проблемы с обновлением состояния (которое я пытаюсь сделать неизменным образом), и компонент, в котором я его использую, никогда не рендерится.

/ 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, но даже если действия вызваныСостояние приращения не обновляется, и компонент Home также не перерисовывается.

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Ответ был прост.Я делал: 

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

Обратите внимание на переключатель (действие), прежде чем переключатель (action.type) Извините за тратитьВаше время и спасибо за все ваши ответы!

0 голосов
/ 03 января 2019

Кажется, вы не устанавливаете user в своем действии: 

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

Похоже, оно должно быть: 

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

Без этого не будет никаких измененийсостояние, а также не требуется рендеринг.

Конечно, вам необходимо изменить функцию редуктора, чтобы она была динамичной: 

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