我尝试在React Native/Expo应用程序中使用React-Redux。Redux存储区中的数据未显示在UI中,尽管没有任何控制台错误消息。
下面是Redux商店和React应用程序的一些主要文件,这里我只展示了一个切片的文件,其他的都差不多。
- 所有配方.还原剂. js**
const initialAllRecipes = [
{
name: "recipe one",
},
{
name: "recipe two",
},
];
export const allRecipesReducer = (allRecipes = initialAllRecipes, action) => {
switch (action.type) {
case "allRecipes/addRecipe":
return [...allRecipes, action.payload];
case "allRecipes/removeRecipe":
return allRecipes.filter((r) => r.id !== action.payload.id);
default:
return allRecipes;
}
};
- 所有配方.操作. js***
export const addRecipe = (newRecipe) => {
return {
type: "allRecipes/addRecipe",
payload: newRecipe,
};
};
export const removeRecipe = (target) => {
return {
type: "allRecipes/removeRecipe",
payload: target,
};
};
- 根还原器. js**
import { combineReducers } from "redux";
import { allRecipesReducer } from "./allRecipes/allRecipes.reducers";
export const rootReducer = combineReducers({
allRecipes: allRecipesReducer,
// other reducers not shown here. . .
});
- 索引. js(在
store
目录中)**
- 索引. js(在
// NOTE: in VS Code, createStore is striken through as deprecated.
import { createStore } from "redux";
import { rootReducer } from "./rootReducer";
export const store = createStore(rootReducer);
- App. js(不显示所有导入)**
import { Provider } from "react-redux";
import { store } from "./store/index.js";
// View Components
import AllRecipes from "./views/AllRecipes/AllRecipes";
export default function App() {
const Tab = createMaterialTopTabNavigator();
return (
<Provider store={store}>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Recipes" component={AllRecipes} />
// other screens not shown here. . .
</Tab.Navigator>
</NavigationContainer>
</Provider>
);
}
- 所有配方. jsx**
import {View, Text} from 'react-native';
import { useSelector } from 'react-redux';
import {store} from '../../store/index'
const AllRecipes = () => {
const allRecipes = useSelector(state => state.allRecipes)
return (
<View>
<Text>All Recipes</Text>
{allRecipes.map(r => {
<Text>{r.name}</Text>
})}
</View>
)
}
export default AllRecipes;
提前感谢您的帮助!
1条答案
按热度按时间fnvucqvd1#
在allRecipes.actions.js * 文件中,将动作文件中的
return
替换为dispatch()
,如下所示