Почему мой компонент не выполняет повторный рендеринг или мои карты состояния не работают?

Question

У меня есть простое приложение React Native с Redux.

• Когда я пытаюсь соединить состояние моего приложения с моим состоянием редукции, оно работает.
• Но когда я отображаю свое состояние редукса на реквизит, оно не работает.

Мои инструменты-редукторы дают мне полное состояние.

Если я зарегистрирую свой реквизит, он будет пуст

Версия

• реакция: "16.6.3",
• реакция-нативная: "^ 0.57.1",
• Reaction-Redux: "^ 6.0.1"
• приставка: "^ 4.0.1"

//index.js

import { Provider } from 'react-redux';
import { createStore, combineReducers } from "redux";
import reducers from './src/reducers/index.js';

const store = createStore(reducers, {}, devToolsEnhancer({ realtime: true }));

const AppContainer = () => {
    return (
        <Provider store={store} >
            <App />
        </Provider>
    )
}

//App.js

import { connect } from 'react-redux';
import { setAccounts } from './src/actions';

const mapStateToProps = (state) => {
  console.log('state', state);
  return {
    accountArray: state.bankReducer.accountArray,
  }
};
export default connect(mapStateToProps, { setAccounts})(class App extends Component {

componentDidMount() {
   const accounts = new Date().getTime();
   this.props.setAccounts(accounts);
}

componentWillReceiveProps(nextProps) {
    console.log('New accounts array has been received', nextProps.accountArray);
  }

//index.js ../reducers

import { combineReducers } from "redux";
import bankReducer from './bankReducer';

export default combineReducers({
    bankReducer: bankReducer,
})

//bankReducer.js

import { ACCOUNTS_SET } from '../actions/actionTypes';

const initialState = {
    accountArray: [],
};

export default (state = initialState, action) => {
    switch (action.type) {
        case ACCOUNTS_SET:
        console.log('hello2');
            return { ...state, accountArray: action.payload }
        default:
            return state;
    }
}

//bankActions.js

import { ACCOUNTS_SET} from './actionTypes';

export const setAccounts = (accounts) => {

    console.log('hello2');

    return {
        type: ACCOUNTS_SET,
        payload: accounts
    }
};


my console [1]

I expect to have an accountsArray with value 2 in my props after I do mapStateToProps. 
The value of accountsArray stays empty


  [1]: https://i.stack.imgur.com/ENT8Y.png

Answer 1

У вас уже есть действие ... вам нужно вызвать его где-нибудь в коде ... чтобы вы могли получить новый набор реквизитов с помощью вашей функции mapStateToProps

Секунда

Второй параметр createStore - это preloadedState, а третий - любые энхансеры, которые вы хотите иметь:

const store = createStore(reducers, {} , devToolsEnhancer({ realtime: true }));

Пример

import { setAccounts } from 'your/path/to/actions/js-file';

class App extends React.Component {
  componentDidMount() {
    // Example calling your action:
    const accounts = 'your values';
    this.props.setAccounts(accounts);
  }

  componentWillReceiveProps(nextProps) {
    console.log('New accounts array has been received', nextProps.accountArray);
  }

  render() {
    //
  }
}

const mapStateToProps = (state) => {
  console.log('state', state);
  return {
    accountArray: state.bankReducer.accountArray,
  };
};

export default connect(
  mapStateToProps,
  { setAccounts },
)(App);

Answer 2

Мне удалось воспроизвести проблему, запустив демонстрационный проект, который вы опубликовали на Github: https://github.com/MaximWuyts/reduxIssueRN

Я получил его, понизив реактив-редукс до v5. Поэтому я предполагаю, что это проблема зависимости / несоответствие.

Сработало после запуска:

• npm i react-redux@5

• react-native start --reset-cache