Магазин не имеет редуктора initialState

Question

Я не могу получить восстановитель хранилища initialState, поэтому я не могу также сопоставить реквизиты в компоненте.

Вот мой редуктор:

const initialState = { currentUser: null }

export default function UserReducer(state = initialState, action){
   let nextState;
   switch(action.type){
    case "USER_CONNECTED":
        nextState = {
            ...state,
            currentUser : action.value
        }
        return nextState;
    case "USER_DECONNECTED":
        nextState = {
            ...state,
            currentUser : null
        }
        return nextState;
    default:
        return state;
  }
}

Вот класс, который настраивает хранилище:

import { createStore, combineReducers } from 'redux';
import UserReducer from './reducers/userReducer'

const rootReducer = combineReducers({
    currentUser : UserReducer
});

const configureStore = () => {
    return createStore(rootReducer);
}

export default configureStore;

И вот где я инициализирую хранилище и передаю егоПриложение благодаря провайдеру:

import {AppRegistry} from 'react-native';
import React from 'react';
import App from './App';
import {name as appName} from './app.json';
import { Provider } from 'react-redux';
import configureStore from './store/store';


const Store = configureStore();
console.log("STORE :"+ JSON.stringify(Store.getState()));
const RNRedux = () => (

    <Provider store = { Store }>
      <App />
    </Provider>
)

AppRegistry.registerComponent(appName, () => RNRedux);

Когда я печатаю «STORE» выше, оно дает мне правильный вывод {currentUser: ...} ,Затем я подключаю App.js к магазину следующим образом:

const AppNavigator = createStackNavigator(
{
    NewAccount: NewAccountScreen,
    Login: LoginScreen
},
{
    initialRouteName: "Login"
}
);

const AppContainer = createAppContainer(AppNavigator);

export class App extends React.Component {

    constructor(props, context){
      super(props, context);
    }

    render() {
      console.log("APP.JS : "+ JSON.stringify(this.props));
      return (
        <AppContainer />
      )
    }
  }

  export default connect()(App);

Итак, в последней строке я подключаю все состояние приложения к компонентам, но это дает мне {} .

Answer 1

Вам не хватает mapStateToProps param в вашем соединении.

export default connect()(App);

Вам необходимо указать функцию отображения, которая будет принимать части состояния и передавать их реквизитам компонентов. Чтобы отобразить все состояние реквизита, попробуйте это:

export default connect(state=>state)(App)

Лучшей практикой было бы пропускать только те части состояния, которые необходимы компоненту. Таким образом вы избежите ненужных повторных визуализаций при изменении какой-либо другой части состояния. Например, если вашему подключенному компоненту требуется только имя пользователя, вы можете сделать это:

export default connect(state=>{firstName:state.currentUser.firstName})(App)