React 5 Auth Screen 导航和 Redux Store 的问题

Question

我是原生反应的新手，我在使用 Auth Screen 导航和 Redux Store 时遇到了这个问题。 因此，当我按“开始”时，它不会导航到 ClassesListScreen，而是保留在 LoginScreen 中。尽管当我在控制台登录时打印出 Store 中的“isLoggedIn”属性为真，但它仍然不会重新渲染。为什么会这样？非常感谢。

这是我的StackNavigation.js：

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import StudentsTabNavInit from './StudentsTabNavigation';
import LoginScreen from '../components/login/LoginScreen';
import DetailsScreen from '../components/details/DetailsScreen';
import store from '../store/store'
import AddScreen from '../components/add/AddScreen';
import ClassesListScreen from '../components/classes/ClassesListScreen';
const StackNav = createStackNavigator();
import { connect } from 'react-redux'
function StackNavInit(){

    return (
        <StackNav.Navigator
            initialRouteName="Login"
        >
            {store.getState().isLoggedIn? (
                <> 
                <StackNav.Screen
                    name="Classes"
                    component={ClassesListScreen}
                    options={{title: "Your Classes"}}
                />
                <StackNav.Screen 
                    name="StudentsTabNav" 
                    component={StudentsTabNavInit} 
                    options ={{title: "Students"}}
                />
                <StackNav.Screen 
                    name="Details" 
                    component={DetailsScreen} 
                    options={{ title: "Details" }}
                />
                <StackNav.Screen
                    name="Add"
                    component={AddScreen}
                    options={{title: "Add Course"}}
                />
                </>
            ) : (
                <>
                <StackNav.Screen 
                    name="Login"
                    component={LoginScreen} 
                    options={{headerShown: false}}
                />
                </>
            )
        }
            
        </StackNav.Navigator>
    )
}


export default StackNavInit 

我的LoginScreen.js：

import React from 'react'
import { render } from 'react-dom'
import { Text, View, Button} from 'react-native'
import store from '../../store/store'
import {login} from '../../store/actions'
class LoginScreen extends React.Component{
    constructor(props){
        super(props)
    }
    logIn = ()=> {
        //console.log(store.getState().isLoggedIn)
        store.dispatch(login());
        //this.props.navigation.navigate("Classes")
    };
    render(){
        return (
            <View>
                <Text> Welcome to Courses Managing Application</Text>
                <Text> Press Start </Text>
                <Button title="Start" onPress={this.logIn}></Button>
                <Text> {store.getState().isLoggedIn} </Text>
            </View>
        )
    }
}

export default LoginScreen

有关更多信息，以下是我的 store 文件夹中的内容（但我认为这不相关）：

actions.js:

export const UPDATE_INFOR = 'UPDATE_INFOR'
export const GET_DATA = 'GET_DATA'
export const ADD_EMPLOYEE = 'ADD_EMPLOYEE'
export const DATA_REQ_SENT = 'DATA_REQ_SENT'
export const DATA_REQ_SUCCEED = 'DATA_REQ_SUCCEED'
export const DATA_REQ_FAILED = 'DATA_REQ_FAILED'
export const LOG_IN = 'LOG_IN'
export const updateInfor = (infor) => ({type: UPDATE_INFOR, payload: infor})

export const addEmployee = (infor) => ({type: ADD_EMPLOYEE, payload: infor})

export const login = () => ({type: LOG_IN})

reducers.js:

import defaultState from './state'
function reducer(state = defaultState, action) {
  switch (action.type) {
    case 'LOG_IN':
      return {...state, isLoggedIn: true}
    default:
      return state
  }
}

export default reducer

state.js:

export default defaultState = {
    isLoggedIn: false,
    url: 'https://randomuser.me/api/',
    results: 100,
    nat:'us',
    list_inc:'name,gender,dob,phone,picture,id',
}

store.js:

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducers'
import thunk from 'redux-thunk'
export default store = createStore(reducer, applyMiddleware(thunk))

Answer 1

我自己想出了一个办法。 首先用<Provider></Provider>包装应用程序

export default function App() {
  return (
    <Provider store ={store}>
      <NavigationContainer>
        <StackNavInit/>
      </NavigationContainer>
    </Provider>

  );
}

然后在 StackNav 中使用 Selector 将属性 isLoggedin 连接到同名的 store 属性，例如：const isLoggedIn = useSelector(state => state.isLoggedIn) 那么导航器看起来像：

function StackNavInit(){
    const isLoggedIn = useSelector(state => state.isLoggedIn)
    return (
        <StackNav.Navigator
            initialRouteName="Login"
        >
            {isLoggedIn? (
                <> 
                <StackNav.Screen
                    name="Classes"
                    component={ClassesListScreen}
                    options={{title: "Your Classes"}}
                />
                <StackNav.Screen 
                    name="StudentsTabNav" 
                    component={StudentsTabNavInit} 
                    options ={{title: "Students"}}
                />
                <StackNav.Screen 
                    name="Details" 
                    component={DetailsScreen} 
                    options={{ title: "Details" }}
                />
                <StackNav.Screen
                    name="Add"
                    component={AddScreen}
                    options={{title: "Add Course"}}
                />
                </>
            ) : (
                <>
                <StackNav.Screen 
                    name="Login"
                    component={LoginScreen} 
                    options={{headerShown: false}}
                />
                </>
            )
        }
            
        </StackNav.Navigator>
    )
}