redux 中的调度和连接不起作用

Question

我是 redux 的初学者。我正在尝试按照本教程进行学习，但它有点过时了。我无法让代码正常工作。我正在使用 React Expo 按照教程构建一个社交应用程序。 在下面的代码中，有几个问题：

• fetchUser 和 fetchUserPosts 永远不会被调用（其中的控制台日志语句永远不会打印）

import { USER_STATE_CHANGE, USER_POSTS_STATE_CHANGE } from '../constants/index.js'
import firebase from 'firebase/app'
import { auth, db } from '../../firebaseConfig.js'
import { doc, getDoc } from "firebase/firestore";


export function fetchUser() {
    console.log("fetchUser");
    return async (dispatch) => {
        const docRef = doc(db, "users", auth.currentUser.uid);
        const docSnap = await getDoc(docRef)
            // .then((docSnap) => {
            //     if (docSnap.exists) {
            //         console.log("fetch user dispatch");
            //         dispatch({ type: USER_STATE_CHANGE, currentUser: docSnap.data() })
            //     } else {
            //         console.log('does not exist')
            //     }
            // }).catch((error) => {
            //     console.log("Error getting document:", error);
            // });
        if (docSnap.exists) {
            console.log("fetch user dispatch");
            dispatch({ type: USER_STATE_CHANGE, currentUser: docSnap.data() })
        } else {
            console.log('does not exist')
        }
    }
}

export function fetchUserPosts() {
    console.log("fetchUserPosts");
    return ((dispatch) => {
        console.log("fetchUserPosts inside return");
        firebase.firestore()
            .collection("posts")
            .doc(auth.currentUser.uid)
            .collection("userPosts")
            .orderBy("creation", "asc")
            .get()
            .then((snapshot) => {
                let posts = snapshot.docs.map(doc => {
                    const data = doc.data();
                    const id = doc.id;
                    return { id, ...data }
                })
                console.log("posts" + posts)
                dispatch({ type: USER_POSTS_STATE_CHANGE, posts })
            })
    })
}

• 当我在 profile.js 中取消注释 mapstatetoprops 时，它会抛出错误：不存在 store 属性。我的控制台日志 (console.log({ currentUser, posts });) 也给出了未定义。 作为注释，代码运行并且应用程序的其余部分运行，但提到的控制台日志再次给出了未定义。

import React from 'react'
import { View, Text, Image, FlatList } from 'react-native'
import { auth } from '../../firebaseConfig'

import { fetchUserPosts } from '../../redux/actions/index.js'

import { connect } from 'react-redux'

function Profile(props) {
  const { currentUser, posts } = props;
  console.log({ currentUser, posts });
  return (
    <View>
      <Text>Profile</Text>
    </View>
  )
}

const mapStateToProps = (state) => ({
  // currentUser: store.userState.currentUser,
  // posts: store.userState.posts,
})

export default connect(mapStateToProps, null)(Profile);

这是我的主要js相关代码：

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

const mapDispatchProps = (dispatch) => bindActionCreators({ fetchUser, fetchUserPosts }, dispatch);

export default connect(mapStateToProps, mapDispatchProps)(main);

这是用户js。

import { USER_STATE_CHANGE, USER_POSTS_STATE_CHANGE } from '../constants/index'

const initialState = {
    currentUser: null,
    posts: []
}

export const user = (state = initialState, action) => {
    switch(action.type){
        case USER_STATE_CHANGE:
            return {
                ...state,
                user: action.currentUser
            }
        case USER_POSTS_STATE_CHANGE:
            return {
                ...state,
                posts: action.posts
            }
        default:
            return state;
    }
}

我的常量：

export const USER_STATE_CHANGE = 'USER_STATE_CHANGE'
export const USER_POSTS_STATE_CHANGE = 'USER_POSTS_STATE_CHANGE'

抱歉帖子太长。我花了几个小时在上面，但我不知道在哪里可以做出改变。我已经尝试了我所知道的一切。如果还需要什么，请告诉我。

Answer 1

您的意思是在这里写

state

，而不是

store

吗？

const mapStateToProps = (state) => ({
  // currentUser: store.userState.currentUser,
  // posts: store.userState.posts,
})

也就是说，请不要使用

connect

和

mapStateToProps

- 这些是遗留 api 大约 5 年了，不会再获得任何更新。

请改用

useSelector

挂钩。