mapStateToProps state 未定义

Question

我在 mapStateToProps 中有一个 state 未定义问题，这简直让我发疯。 Stackoverflow 中有很多未定义的问题主题，但我使用的代码到目前为止符合所有标准，但仍然未定义。

我的代码基于https://github.com/JulianCurrie/CwC_React_Native/tree/redux_tutorial

我正在使用新版本的 React native 和 Redux。 “react”：“16.11.0”，“react-native”：“0.62.2”，“react-redux”：“^7.2.0”，“redux”：“^4.0.5”

这些是文件。

index.js

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

import configStore from './app/store';

const store = configStore();

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

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

应用程序.js

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Button,
  Text,
} from 'react-native';

import {connect} from 'react-redux';
import {createChat} from './app/actions/chat'

const addItem = () => {
  this.props.add('Add Content MSG');
}

const App: () => React$Node = () => {
  return (
    <>
      <SafeAreaView>
        <Text>{this.chats.length}</Text>
        <Button onPress={addItem} title="Add Msg"/>
      </SafeAreaView>
    </>
  );
};


const mapStateToProps = (state) => {
  return {
    chats: state.chatReducer.chatList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    add: (data) => dispatch(createChat(data))
  }
}

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

应用程序/动作/chat.js

import {CREATE_CHAT,DELETE_CHAT} from './types';

export const createChat = (data) => (
    {
        type: CREATE_CHAT,
        data: data

    }
);

export const deleteChat = (key) => (
    {
        type: DELETE_CHAT,
        key: key

    }
);

应用程序/store.js

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

const rootReducer = combineReducers({
    chatReducer:chatReducer
})

const configureStore = () => createStore(rootReducer);

export default configureStore;

应用程序/reducers/chatReducer.js

import {CREATE_CHAT,DELETE_CHAT} from '../actions/types';

const initialState = {
    chatList: [],
}

const chatReducer = (state = initialState, action) => {


    switch(action.type){
        case CREATE_CHAT:
           return {
                ...state,
                chatList: state.chatList.concat({
                    _id:  Math.random().toString(12).substring(0) ,
                    text: action.data,
                    createdAt: new Date(),
                    user: {
                      _id: 1,
                    },
                    sent: true,
                    received: true,
                    pending: true,
                  })
            }

        case DELETE_CHAT:
            return {
                ...state,
                chatList: state.chatList.filter((item) => 
                item.key !== key)
            }
        default:
            return state;
    }
    

};

export default chatReducer;

应用程序/动作/types.js

import {CREATE_CHAT,DELETE_CHAT} from './types';

export const createChat = (data) => (
    {
        type: CREATE_CHAT,
        data: data

    }
);

export const deleteChat = (key) => (
    {
        type: DELETE_CHAT,
        key: key

    }
);

应用程序/动作/types.js

export const CREATE_CHAT = 'ADD_CHAT';
export const DELETE_CHAT = 'DELETE_CHAT';

this.props 不知何故也不起作用，这真的令人沮丧，因为 redux 中有许多不同版本的实现。

我真的希望有人知道如何解决这个问题。

先感谢您。

Answer 1

似乎您的 arguments 顺序错误。

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

Answer 2

你没有使用props ，

您可能会从您的道具中获取数据，如下所示：

const App: () => React$Node = (props) => {
  return (
    <>
      <SafeAreaView>
        <Text>{this.props.chats.length}</Text>
        <Button onPress={addItem} title="Add Msg"/>
      </SafeAreaView>
    </>
  );
};

mapStateToProps负责通过connect函数将 redux 存储的数据传递给您的组件props ！