MapStateToProps не вызывается - PullRequest
Новая
       10

MapStateToProps не вызывается

0 голосов
/ 31 мая 2018

Я понимаю, что подобные вопросы задавались много раз;но я исчерпал все ресурсы и варианты и не могу понять, почему это не работает.Когда я создаю действие "AUTHENTICATION_LOGOUT" , я могу проследить его до редуктора действия и увидеть, что из редуктора действия возвращается новое состояние, однако оно не воспринимается в компоненте connect и, следовательно, mapStateToProps не будет работать.Я возвращаю новый объект для состояния, поэтому проверка должна пометить его как изменение состояния, а не как изменение состояния, верно?это может быть ошибка или несовпадение версий?Спасибо.

в auth_actions: 

export const appLogout = () => async dispatch => {
    await AsyncStorage.removeItem(USER);
    dispatch({ type: "AUTHENTICATION_LOGOUT" });
};

в auth_reducer.js 

export default function (state = {}, action) {
        switch (action.type) {
            case "AUTHENTICATION_SUCCESS":
                return { user: action.payload };
            case "AUTHENTICATION_LOGOUT":
                return {user: null };
            default:
                return state;
        }
    }

в index.js в папке редукторов: 

export default combineReducers({
    search, auth
});

в AuthComponent.js: 

import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { connect } from 'react-redux';
class AuthScreen extends Component {
 ...
}

function mapStateToProps(state) {
    let { auth } = state;
    return { user: auth.user };
}

export default connect(mapStateToProps, actions)(AuthScreen);

и хранилище: 

const store = createStore(
    reducers,
    {},
    compose(
        applyMiddleware(thunk)
    )
);

export default store;

в App.js 

import store from './store';
import { Provider } from 'react-redux';
export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <MainNavigation />
      </Provider>
    );
  }
}

package.json: 

"dependencies": {
    "axios": "^0.18.0",
    "expo": "^27.0.0",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }

Обновление После долгих копаний я понял, в чем проблема.Проблема, которую я, конечно, не смог увидеть, заключалась в том, что этот компонент был размонтирован и поэтому вообще не получал никакого обновления состояния .Я проверил это с помощью хука жизненного цикла componentWillUnmount .Это не имело никакого отношения к государственной мутации.Меня ужасно смутили все разговоры и посты о государственной мутации.Спасибо всем за неоценимую помощь и время.

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Возможно, вы забыли использовать react-redux Provider.

Еще один совет, вы можете улучшить свою mapStateToProps функцию следующим образом: 

const mapStateToProps = ({auth}) => auth;

или если вы используете ramda: 

const mapStateToProps = prop('auth');

Вам не нужно создавать новый объект в функции mapStateToProps, потому что редуктор уже это делает.Обратите внимание, что auth - это объект, который имеет единственное свойство: user, поэтому вы можете просто извлечь auth из состояния и все (немного меньше работы для сборщика мусора: -)).

0 голосов
/ 31 мая 2018

Никогда не используй реагирующий нативный, так что, возможно, я что-то упустил, но я полагаю, что в редуксе ожидают, что действие в аргументе диспетчеризации будет функцией, возвращающей фактический объект действия.Также функция должна быть импортирована из другого файла.

проверьте, что значение AUTHENTICATION_LOGOUT является строкой

, используя es6, ваш mapStateToProps будет лучше таким образом: 

({auth: {user}) => ({user})
...