我无法从另一个组件中读取我的状态(Redux)?

huangapple go评论72阅读模式
英文:

I cannot read my state from another component (Redux)?

问题

I'm having an issue about reading my state from another component. I use Redux Toolkit to store my state.

colorPick.js :

  1. import { createSlice } from '@reduxjs/toolkit';
  2. export const colorizerSlice = createSlice({
  3. name: 'colorizer',
  4. initialState: {
  5. color: { nav: '#cecece',
  6. bg: '#ebebeb' }
  7. },
  8. reducers: {
  9. yellow: state => {
  10. state.color = { nav: '#e1ce00',
  11. bg: '#ffed27' }
  12. },
  13. red: state => {
  14. state.color = { nav: '#e11300',
  15. bg: '#ff3d27' }
  16. },
  17. green: state => {
  18. state.color = { nav: '#00e104',
  19. bg: '#4bff27' }
  20. },
  21. pink: state => {
  22. state.color = { nav: '#e100ce',
  23. bg: '#ff27fb' }
  24. },
  25. orange: state => {
  26. state.color = { nav: '#e18b00',
  27. bg: '#ff8527' }
  28. },
  29. // incrementByAmount: (state, action) => {
  30. // state.value += action.payload
  31. // }
  32. }
  33. })
  34. // Action creators are generated for each case reducer function
  35. export const { yellow,
  36. red,
  37. green,
  38. pink,
  39. orange, } = colorizerSlice.actions
  40. export default colorizerSlice.reducer

store.js :

  1. import { configureStore } from '@reduxjs/toolkit'
  2. import colorizerReducer from './reducers/colorPick';
  3. export default configureStore({
  4. reducer: {
  5. colorizer: colorizerReducer,
  6. }
  7. })

App.js :

  1. import { StatusBar } from 'expo-status-bar';
  2. import { useState, useEffect } from 'react';
  3. import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
  4. import { NavigationContainer } from '@react-navigation/native';
  5. import { createNativeStackNavigator } from '@react-navigation/native-stack';
  6. import { Provider } from 'react-redux';
  7. import Notes from './screens/Notes';
  8. import ViewNote from './screens/ViewNote';
  9. import EditNote from './screens/EditNote';
  10. import AddNote from './screens/AddNote';
  11. import store from './redux/store';
  12. export default function App() {
  13. const Stack = createNativeStackNavigator();
  14. return (
  15. <Provider store={store}>
  16. <NavigationContainer>
  17. <Stack.Navigator screenOptions={defaultOptions}>
  18. <Stack.Screen name='Notes' component={Notes} options={notesOptions} />
  19. <Stack.Screen name='ViewNote' component={ViewNote} options={viewNotesOptions} />
  20. <Stack.Screen name='EditNote' component={EditNote} options={editNotesOptions} />
  21. <Stack.Screen name='AddNote' component={AddNote} options={addNotesOptions} />
  22. </Stack.Navigator>
  23. </NavigationContainer>
  24. </Provider>
  25. );
  26. }

ColorPalette.js : (I can read my state in this component)

  1. import { StyleSheet, Text, View, Pressable } from 'react-native'
  2. import React from 'react'
  3. import { useDispatch, useSelector } from 'react-redux'
  4. import { green, red, yellow, orange, pink } from '../redux/reducers/colorPick';
  5. const ColorPalette = () => {
  6. const { color } = useSelector((state) => state.colorizer);
  7. const dispatch = useDispatch();
  8. console.log(color.nav);
  9. return (
  10. <View style={styles.paletteContainer}>
  11. <Pressable style={[styles.color, {backgroundColor: '#ffed27'}]} android_ripple={{color: '#d9d9d9'}} onPress={() => dispatch(yellow())} />
  12. <Pressable style={[styles.color, {backgroundColor: '#ff3d27'}]} android_ripple={{color: '#d9d9d9'}} onPress={() => dispatch(red())} />
  13. <Pressable style={[styles.color, {backgroundColor: '#4bff27'}]} android_ripple={{color: '#d9d9d9'}} onPress={() => dispatch(green())} />
  14. <Pressable style={[styles.color, {backgroundColor: '#ff27fb'}]} android_ripple={{color: '#d9d9d9'}} onPress={() => dispatch(pink())} />
  15. <Pressable style={[styles.color, {backgroundColor: '#ff8527'}]} android_ripple={{color: '#d9d9d9'}} onPress={() => dispatch(orange())} />
  16. <View style={{backgroundColor: color.nav, width:20}}></View>
  17. <View style={{backgroundColor: color.bg, width:20}}></View>
  18. </View>
  19. )
  20. }

NoteTile.js : (I cannot read in this component)

  1. import { StyleSheet, Text, View, Pressable } from 'react-native'
  2. import React from 'react'
  3. import { useSelector } from 'react-redux';
  4. const NoteTile = ({title, det, pressFunc}) => {
  5. const { color } = useSelector((state) => state.colorizer);
  6. // const color = useSelector((state) => state.colorizer.color);
  7. return (
  8. <View style={styles.tileContainer} >
  9. <Pressable android_ripple={{color: '#cccccc'}}
  10. style={styles.button}
  11. onPress={pressFunc} >
  12. <View style={[styles.innerContainer]} >
  13. <Text style={styles.title} >{title}</Text>
  14. <Text style={styles.details} >{det}</Text>
  15. </View>
  16. </Pressable>
  17. </View>
  18. )
  19. }
  20. export default NoteTile
  21. const styles = StyleSheet.create({
  22. tileContainer: {
  23. flex: 1,
  24. margin: 10,
  25. height: 100,
  26. maxHeight: 400,
  27. borderRadius: 30,
  28. elevation: 5,
  29. overflow: 'hidden',
  30. // backgroundColor: '#ffffff'
  31. backgroundColor: color.bg,
  32. }})

The error that I got is 'Can't find variable: color';

I wrapped my code with Provider. And I use NoteTile.js in Notes Screen which is within the Provider.

英文:

I'm having an issue about reading my state from another component. I use Redux Toolkit to store my state.

colorPick.js :

  1. import { createSlice } from &#39;@reduxjs/toolkit&#39;
  2. export const colorizerSlice = createSlice({
  3. name: &#39;colorizer&#39;,
  4. initialState: {
  5. color: { nav: &#39;#cecece&#39;,
  6. bg: &#39;#ebebeb&#39; }
  7. },
  8. reducers: {
  9. yellow: state =&gt; {
  10. state.color = { nav: &#39;#e1ce00&#39;,
  11. bg: &#39;#ffed27&#39; }
  12. },
  13. red: state =&gt; {
  14. state.color = { nav: &#39;#e11300&#39;,
  15. bg: &#39;#ff3d27&#39; }
  16. },
  17. green: state =&gt; {
  18. state.color = { nav: &#39;#00e104&#39;,
  19. bg: &#39;#4bff27&#39; }
  20. },
  21. pink: state =&gt; {
  22. state.color = { nav: &#39;#e100ce&#39;,
  23. bg: &#39;#ff27fb&#39; }
  24. },
  25. orange: state =&gt; {
  26. state.color = { nav: &#39;#e18b00&#39;,
  27. bg: &#39;#ff8527&#39; }
  28. },
  29. // incrementByAmount: (state, action) =&gt; {
  30. // state.value += action.payload
  31. // }
  32. }
  33. })
  34. // Action creators are generated for each case reducer function
  35. export const { yellow,
  36. red,
  37. green,
  38. pink,
  39. orange, } = colorizerSlice.actions
  40. export default colorizerSlice.reducer

store.js :

  1. import { configureStore } from &#39;@reduxjs/toolkit&#39;
  2. import colorizerReducer from &#39;./reducers/colorPick&#39;
  3. export default configureStore({
  4. reducer: {
  5. colorizer: colorizerReducer,
  6. }
  7. })

App.js :

  1. import { StatusBar } from &#39;expo-status-bar&#39;;
  2. import { useState, useEffect } from &#39;react&#39;;
  3. import { Button, StyleSheet, Text, TextInput, View } from &#39;react-native&#39;;
  4. import { NavigationContainer } from &#39;@react-navigation/native&#39;;
  5. import { createNativeStackNavigator } from &#39;@react-navigation/native-stack&#39;;
  6. import { Provider } from &#39;react-redux&#39;;
  7. import Notes from &#39;./screens/Notes&#39;;
  8. import ViewNote from &#39;./screens/ViewNote&#39;;
  9. import EditNote from &#39;./screens/EditNote&#39;;
  10. import AddNote from &#39;./screens/AddNote&#39;;
  11. import store from &#39;./redux/store&#39;;
  12. export default function App() {
  13. const Stack = createNativeStackNavigator();
  14. return (
  15. &lt;Provider store={store}&gt;
  16. &lt;NavigationContainer&gt;
  17. &lt;Stack.Navigator screenOptions={defaultOptions}&gt;
  18. &lt;Stack.Screen name=&#39;Notes&#39; component={Notes} options={notesOptions} /&gt;
  19. &lt;Stack.Screen name=&#39;ViewNote&#39; component={ViewNote} options={viewNotesOptions} /&gt;
  20. &lt;Stack.Screen name=&#39;EditNote&#39; component={EditNote} options={editNotesOptions} /&gt;
  21. &lt;Stack.Screen name=&#39;AddNote&#39; component={AddNote} options={addNotesOptions} /&gt;
  22. &lt;/Stack.Navigator&gt;
  23. &lt;/NavigationContainer&gt;
  24. &lt;/Provider&gt;
  25. );
  26. }

ColorPalette.js : (I can read my state in this component)

  1. import { StyleSheet, Text, View, Pressable } from &#39;react-native&#39;
  2. import React from &#39;react&#39;
  3. import { useDispatch, useSelector } from &#39;react-redux&#39;
  4. import { green, red, yellow, orange, pink } from &#39;../redux/reducers/colorPick&#39;
  5. const ColorPalette = () =&gt; {
  6. const { color } = useSelector((state) =&gt; state.colorizer);
  7. const dispatch = useDispatch();
  8. console.log(color.nav);
  9. return (
  10. &lt;View style={styles.paletteContainer}&gt;
  11. &lt;Pressable style={[styles.color, {backgroundColor: &#39;#ffed27&#39;}]} android_ripple={{color: &#39;#d9d9d9&#39;}} onPress={() =&gt; dispatch(yellow())} /&gt;
  12. &lt;Pressable style={[styles.color, {backgroundColor: &#39;#ff3d27&#39;}]} android_ripple={{color: &#39;#d9d9d9&#39;}} onPress={() =&gt; dispatch(red())} /&gt;
  13. &lt;Pressable style={[styles.color, {backgroundColor: &#39;#4bff27&#39;}]} android_ripple={{color: &#39;#d9d9d9&#39;}} onPress={() =&gt; dispatch(green())} /&gt;
  14. &lt;Pressable style={[styles.color, {backgroundColor: &#39;#ff27fb&#39;}]} android_ripple={{color: &#39;#d9d9d9&#39;}} onPress={() =&gt; dispatch(pink())} /&gt;
  15. &lt;Pressable style={[styles.color, {backgroundColor: &#39;#ff8527&#39;}]} android_ripple={{color: &#39;#d9d9d9&#39;}} onPress={() =&gt; dispatch(orange())} /&gt;
  16. &lt;View style={{backgroundColor: color.nav, width:20}}&gt;&lt;/View&gt;
  17. &lt;View style={{backgroundColor: color.bg, width:20}}&gt;&lt;/View&gt;
  18. &lt;/View&gt;
  19. )
  20. }

NoteTile.js : (I cannot read in this component)

  1. import { StyleSheet, Text, View, Pressable } from &#39;react-native&#39;
  2. import React from &#39;react&#39;
  3. import { useSelector } from &#39;react-redux&#39;
  4. const NoteTile = ({title, det, pressFunc}) =&gt; {
  5. const { color } = useSelector((state) =&gt; state.colorizer);
  6. // const color = useSelector((state) =&gt; state.colorizer.color);
  7. return (
  8. &lt;View style={styles.tileContainer} &gt;
  9. &lt;Pressable android_ripple={{color: &#39;#cccccc&#39;}}
  10. style={styles.button}
  11. onPress={pressFunc} &gt;
  12. &lt;View style={[styles.innerContainer]} &gt;
  13. &lt;Text style={styles.title} &gt;{title}&lt;/Text&gt;
  14. &lt;Text style={styles.details} &gt;{det}&lt;/Text&gt;
  15. &lt;/View&gt;
  16. &lt;/Pressable&gt;
  17. &lt;/View&gt;
  18. )
  19. }
  20. export default NoteTile
  21. const styles = StyleSheet.create({
  22. tileContainer: {
  23. flex: 1,
  24. margin: 10,
  25. height: 100,
  26. maxHeight: 400,
  27. borderRadius: 30,
  28. elevation: 5,
  29. overflow: &#39;hidden&#39;,
  30. // backgroundColor: &#39;#ffffff&#39;
  31. backgroundColor: color.bg,
  32. }})

The error that I got is 'Can't find variable: color'

I wrapped my code with Provider.
And I use NoteTile.js in Notes Screen which is within the Provider.

答案1

得分: 0

尝试以这种方式使用它:

  1. <View style={[styles.tileContainer, { backgroundColor: color.bg }]}>
英文:

try using it this way

  1. &lt;View style={[styles.tileContainer,{ backgroundColor:color.bg }]} &gt;

huangapple
  • 本文由 发表于 2023年2月18日 22:23:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/75493974.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定