React native redux может читать значение, но не может обновить значение на той же странице

Я могу прочитать значение хранилища избыточности (Props), но я не могу обновить значение состояния избыточности (Props2), когда кажется, что действие отправляется функции редуктора.

React native redux может читать значение, но не может обновить значение на той же странице

Страница:

componentDidMount(){
    console.info("Props:"+this.props.user)
}

dummyFunction() {
    //Redux
    this.props.toggleTheme('red');

    //which prints the object above in the screenshot
    console.info(this.props.toggleTheme('red'));    

    console.info("Props2:"+this.props.user);
}

const mapStateToProps = state => ({
  user: state.user.userData,
});

const mapDispatchToProps = dispatch => ({
  toggleTheme: (user) => dispatch(toggleTheme(user)),
});

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

Редуктор:

const initialState = {
    userData: "Apple",
  };

  const user = (state = initialState, action) => {
    switch (action.type) {
      case 'TOGGLE_THEME':
        switch(action.payload) {
          case 'red':
            console.info("Payload1:"+ action.payload);
            return { userData: "Orange" };
          case 'blue':
          console.info("Payload2:"+ action.payload);
            return { userData: "Pear" };
        }
      default:
      console.info("Payload:3"+ action.payload);
        return state;
    }
  };

  export default user;

Действия:

import { TOGGLE_THEME } from './actionTypes';
//which TOGGLE_THEME = 'TOGGLE_THEME'

export const toggleTheme = user => ({
  type: TOGGLE_THEME,
  payload: user,
});

Пакет.json

 "dependencies": {
    "@expo/samples": "2.1.1",
    "expo": "^32.0.0",
    "react": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.0.9",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
  }

Обновление: пытался получить состояние, когда я перехожу на другую страницу, и он работает правильно, получая оранжевое значение. Как я могу получить правильное значение на той же странице (в dummyFunction)?

Я бы сказал, что вместо того, чтобы возвращать новый объект состояния в вашем редукторе, вы можете изменить его так return {...state, userData: "Orange"} и в целях отладки попытаться упростить оператор switch, чтобы увидеть, что происходит не так.

Amr Aly 28.05.2019 04:21

Привет @AmrAly, я пробовал ... состояние безрезультатно. Странно то, что обновленное значение извлекается при переходе на другую страницу, а это означает, что оператор switch работает нормально.

Gene 28.05.2019 05:03

В ответе это парень говорит, что вы не можете просто войти в консоль с той же функцией, вместо этого вы можете сделать это в componentWillReceiveProps

Amr Aly 28.05.2019 05:49

Даже когда я вызываю функцию во второй раз, она все равно показывает мне «красный». Я предполагаю, что это больше связано с тем, что «mapStateToProps» не обновляется.

Gene 28.05.2019 08:08

попробуйте консоль войти в свое состояние mapStateToProps

Amr Aly 28.05.2019 08:14

сделал это, не может консоль внутри mapStateToProps. Redux не позволяет этого, к сожалению

Gene 28.05.2019 09:16

вы можете вести консольный журнал следующим образом: const mapStateToProps = state => ( console.info('state:',state); return { user: state.user.userData, });

Idan 28.05.2019 09:54

Можно и так const mapStateToProps = state => { console.info('state:',state); return { user: state.user.userData, }};

Amr Aly 29.05.2019 04:08

@AmrAly пытался это сделать, и я могу получить свое значение в mapStateToProps.

Gene 31.05.2019 03:50

Значит, он изменяет значение userData?

Amr Aly 31.05.2019 06:28

Нет, та же функция страницы по-прежнему не может получить Orange. Но значение отражается в mapStateToProps.

Gene 31.05.2019 10:33

Как и в ответе ниже, изменение значения должно быть обнаружено в методах жизненного цикла.

Amr Aly 31.05.2019 14:27
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
12
568
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Что вы можете сделать, это:

  • Отправка toggleTheme акция в dummyFunction
  • Обнаружение изменений в свойствах с помощью методов жизненного цикла, таких как componentDidUpdate или getDerivedStateFromProps.
  • При обнаружении изменения в реквизите user используйте его по своему усмотрению.

Я думаю, проблема в том, что он пытается уловить изменение в той же функции dummyFunction, но должен быть обнаружен в методе жизненного цикла в соответствии с вашим ответом.

Amr Aly 04.06.2019 12:50

Другие вопросы по теме