使用 react-navigation 时不发送 redux 状态

Posted 2023-02-22

【中文标题】使用 react-navigation 时不发送 redux 状态

【英文标题】：redux state don't send when use react-navigation

【发布时间】：2018-01-05 20:34:17

【问题描述】：

我在 react-native 中使用 react-navigation 和 redux。当我刚刚使用 redux 时，状态可以通过 redux 发送给孩子。但是当我添加反应导航时它不起作用。 我的导航.js

import StackNavigator from 'react-navigation';
import Home from './modules/home/views/Home'
export const StackRouter = StackNavigator(
    Main: screen: Home,
    initialRouteName: screen: Home
);
const firstAction = StackRouter.router.getActionForPathAndParams('Main');
const tempNavState = StackRouter.router.getStateForAction(firstAction);
const initialNavState = StackRouter.router.getStateForAction(
    firstAction,
    tempNavState
);
//navigationreducer
export const stackReducer = (state=initialNavState,action) => 
    debugger
    const newState = StackRouter.router.getStateForAction(action, state);
    return newState || state;
;

我的商店.js

import React, Component from 'react';
import   connect, Provider  from 'react-redux';
import createStore, combineReducers, bindActionCreators, applyMiddleware  from 'redux';
import addNavigationHelpers from 'react-navigation'
import thunk from 'redux-thunk'
import PropTypes from 'prop-types'

import StackRouter, stackReducer from './router'
import home from './modules/home';   



//routerConmponent
class RouterAppWithState extends Component 
    constructor(props)
        super(props)
    
    render() 
        return (
            <StackRouter navigation=addNavigationHelpers(
                dispatch: this.props.dispatch,
                state: this.props.router,
            ) />
        );
    



//all reducer
const reducer = combineReducers(
    home: home.reducer,
    router: stackReducer,

);

const mapActionToProps = (dispatch) => 
    return 
        home_actions: bindActionCreators(home.actions, dispatch)
    
;

const mapStateToProps = (state) => 
    debugger;
    return state
;



//connect redux and navigation
const StoreApp = connect(mapStateToProps, mapActionToProps)(RouterAppWithState);

const store = applyMiddleware(thunk)(createStore)(reducer);

export default class RootApp extends Component
    render() 
        return(
            <Provider store=store>
                <StoreApp />
            </Provider>
        )
    

我的home.js，只需要导入actions和reducers，然后导出模块

import actions from './store/actions';
import reducer from './store/reducer'

export default 
    actions,
    reducer
 

我的减速器

export default(state=states, action) => 
    let newState = ...state;
    switch (action.type)
        case TYPES.ADD_COUNT: newState.count = state.count+1;break;
        default: break;
    
    return newState
;

我的行为

const add_count = () => 
    console.log('add');
    return async (dispatch) => 
        dispatch(type: TYPES.ADD_COUNT);
        await new Promise((resolve) => setTimeout(() => resolve() , 3000));
        dispatch(type: TYPES.ADD_COUNT);
    ;
;



export default 
    add_count

我的观点 Home.js

import React, Component, StyleSheet from 'react';
import View, Text, Button from 'react-native';

export default class Home extends Component
    constructor(props)
        super(props)
    
    // static contextTypes = 
    //     navigation: React.PropTypes.Object
    // ;
    render() 
        debugger
        const add_count = this.props.home_actions;
        const count = this.props.home;
        return (
            <View>
                <Text >count</Text>
                <Button onPress=add_count title='add count'/>
                /*<Button onPress=() => navigation.navigate('live') title='live'/>*/
            </View>
        )
    

在 Home.js 函数渲染中，this.props 是

navigation: Object,
screenProps: undefined

redux 中没有状态。但没有反应导航，this.props 是

home: Object,
home_actions: Object

谢谢

【参考方案1】：

原因是因为现在StackRouter 正在控制您的Home 页面的呈现。路由器只传递一个名为navigation 的道具以及您从screenProps 传递的任何内容。

有两种方法可以实现与以前类似的行为：

1) 在RouterAppWithState的渲染函数中，像这样将this.props传递给screenProps

<StackRouter navigation=addNavigationHelpers(
            dispatch: this.props.dispatch,
            state: this.props.router,
        )
  screenProps=this.props
/>

2) (推荐) 另一种方法是直接在你的主页上使用connect 将你的Home 组件连接到商店并访问home 商店的特定部分。即connect(mapStateToProps)(Home)

【讨论】：

太棒了！！！我成功解决了我的问题，非常感谢

通过代码使用多个连接来展示您的意思会非常有帮助。

@BoomerRogers 我认为这是我之前的编辑之一？所以基本上，如果你想订阅更改，你可以使用 connect()(YourComponent) 连接你的组件，你可以为任何需要商店中的东西的组件执行此操作。它不必只是连接到 redux 存储的根级别组件。这确实意味着如果您同时连接组件及其后代之一，您需要更加注意触发重新渲染的原因以避免不必要的渲染。