Компонент, связанный с React-Native Redux, не отправляет действия - PullRequest
Новая
       47

Компонент, связанный с React-Native Redux, не отправляет действия

0 голосов
/ 09 июля 2020

Я подключил свой компонент к redux, определил mapStateToProps и mapDispatchToProps, но диспетчер, похоже, ничего не делает.

Когда я запускаю это, 'console.log ("Установка токена")' распечатывается, но больше ничего не происходит. Итак, this.props.setToken срабатывает, потому что там установлен этот console.log, но хранилище не обновляется, и this.props.auth_token не отображается на экране, как должно, если диспетчер (setToken) сработал правильно ...

Экран приложения 

import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { setToken } from './reducer';

class AppScreen extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.setToken("token_abc");
  }

  render() {
    if (this.props.loading) {
      return (
        <View style={{ flex: 1 }}>
          <ActivityIndicator />
        </View>
      )
    } else {
      return (
        <View>
          <Text>You're in! '{this.props.auth_token}'</Text>
        </View>
      )
    }
  }
}

function mapStateToProps(state) {
  return {
    user: state.user,
    auth_token: state.auth_token,
    loading: state.loading,
    error: state.error
  };
}

const mapDispatchToProps = dispatch => {
  return {
    setToken: token => {
      console.log("Setting token")
      dispatch(setToken(token));
    }
  }
}

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

Редуктор 

import { createSlice } from "@reduxjs/toolkit";
const appSlice = createSlice({
  name: "app",
  initialState: {
    loading: true,
    auth_token: "",
    error: "",
    user: {}
  },
  reducers: {
    setToken: (state, action) => {
      state.auth_token = action.payload;
      state.loading = false;
    },
  },
  extraReducers: {
  }
});

export const { setToken } = appSlice.actions;
export const appReducer = appSlice.reducer;

Магазин 

import { appReducer } from "./App/reducer";
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";

const middleware = [
  ...getDefaultMiddleware(),
]

const store = configureStore({
  reducer: {
    app: appReducer
  },
  middleware,
});

export default store;

1 Ответ

1 голос
/ 09 июля 2020

У вас есть несоответствие между настройкой объединенного редуктора хранилища и тем, что пытается сделать ваш mapState.

Ваш компонент ожидает, что state.auth_token будет существовать. В appSlice.reducer есть поле auth_token внутри. Следовательно, state.auth_token будет существовать только в том случае, если appSlice.reducer является редуктором root для всего магазина.

Однако в настоящее время вы передаете appSlice.reducer как «редуктор среза» "для state.app, что приведет к state.app.auth_token.

Вам нужно либо передать reducer: appReducer, чтобы он стал редуктором root, или обновите mapState читать state.app.auth_token.

Учитывая, что у вас, вероятно, будут другие фрагменты, я бы рекомендовал второй подход.

...