[英]How can I grab a value from a Redux store from outside of a component?
I need to use the value of a store outside of a component. 我需要使用组件外部的存储值。
Basically I have this: 基本上我有这个:
// imports
import HomeScreen from '../screens/HomeScreen/HomeScreen';
import SettingsScreen from '../screens/SettingsScreen/SettingsScreen';
import FRoute from '../screens/HomeScreen/HomeScreen';
import SRoute from '../screens/SettingsScreen/SettingsScreen';
const HomeStack = createStackNavigator({
PickupHome: HomeScreen,
});
const SettingsStack = createStackNavigator({
PickupSettings: SettingsScreen,
});
export default createBottomTabNavigator({
HomeStack,
SettingsStack,
});
As you just saw, it is not a component. 如您所见,它不是组件。 It is a file which contains my routes. 这是一个包含我的路线的文件。 It is named MainTabNavigator. 它名为MainTabNavigator。 With it, I need to do something like this: 有了它,我需要执行以下操作:
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen/HomeScreen';
import SettingsScreen from '../screens/SettingsScreen/SettingsScreen';
import FRoute from '../screens/HomeScreen/HomeScreen';
import SRoute from '../screens/SettingsScreen/SettingsScreen';
const HomeStack = createStackNavigator({
// HERE I NEED TO USE THE VALUE FROM THE STORE
PickupHome: valueFromStore ? HomeScreen : FRoute,
});
const SettingsStack = createStackNavigator({
// HERE I NEED TO USE THE VALUE FROM THE STORE
PickupSettings: valueFromStore ? SettingsScreen : SRoute,
});
export default createBottomTabNavigator({
HomeStack,
SettingsStack,
});
As you can see, there is no way for me to call connect
or any kind of thing where I can call the stores and pass them as a props as we would do it normally. 如您所见,我无法像通常那样,打电话给connect
或任何可以打电话给商店并将其作为道具传递的东西。
This is the reducer I have done: 这是我做过的减速器:
import createReducer from '../../../redux/createReducer';
import ActionTypes from '../constants/ActionTypes';
const initialState = {
navigation: {
index: 0,
routes: [
{ key: '1', title: 'Title 1' },
{ key: '2', title: 'Title 2' },
],
},
};
const handlers = {
[ActionTypes.INDEX_ROUTE](state, action) {
return {
...state,
navigation: {
...state.navigation,
index: action.payload.index,
},
};
},
};
export default createReducer(initialState, handlers);
And the action: 动作:
import ActionTypes from '../constants/ActionTypes';
export const indexRouteAction = index => ({
type: ActionTypes.INDEX_ROUTE,
payload: {
index,
},
});
export default indexRouteAction;
For example: I am using that store on another component and I can access its values like this: 例如:我在另一个组件上使用该存储,并且可以像这样访问其值:
export default compose(
connect(
store => ({
navigationStore: store.homeScreen.navigation,
}),
dispatch => ({
indexRouteActionHandler: data => {
dispatch(indexRouteAction(data));
},
}),
),
)(withNavigation(TopTabView));
So I can grab the values from there and that's it. 所以我可以从那里获取价值,仅此而已。
So what else should I do in order to grab the values of that store on my file I posted first? 因此,为了在我首先发布的文件中获取该存储的值,我还应该怎么做?
UPDATE: 更新:
I was reading about this: https://redux.js.org/api/store#getState But I don't know how to adapt that to my code and I don't know if that is solution that will work for my case. 我正在阅读有关此内容的信息: https : //redux.js.org/api/store#getState但是我不知道如何使它适应我的代码,也不知道这是否适合我的情况。 Any insights? 有什么见解吗?
Somewhere in your code you will be creating store as below: 您将在代码中的某处创建存储,如下所示:
const store = createStore( ..reducers);
Export this fellow, import where you want to access store and then 导出此同伴,导入要访问商店的位置,然后
store.getState().item // You can access store data
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.