Reactjs 在组件中使用操作

嘿，我一直在网上阅读redux教程，我遵循了从教程中了解到的内容，现在我想更改我设置的不同初始状态的状态，我已经对我在教程中阅读的减速器、动作和存储原因进行了编码，但是我不知道如何根据我设置的操作和减速器来更改组件中的状态，例如，如果我想使

home

为false，我已经编写了一个

false home

操作来实现这一点，但我不知道如何在我的组件中使用它，例如，我想在导航时更改home的状态，使用falseHome，任何帮助都将不胜感激，我在这里学习，谢谢

**STORE\INDEX.JS**

import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;

**REDUCERS\INDEX.JS**

import{TRUE_HOME, TRUE_BROWSE,
TRUE_CART, TRUE_MESSAGES,
TRUE_SERVICES, FALSE_BROWSE,
FALSE_CART, FALSE_HOME, FALSE_MESSAGES,
FALSE_SERVICES} from "../constants/action-types";
const initialState = {
messages: false,
home: true,
browse: false,
cart: false,
services: true
};
const rootReducer = (state = initialState, action) => {
switch (action.type){
    case TRUE_HOME:
        return{
            ...state,
         home: true
        };
    case FALSE_HOME:
        return{
            ...state,
            home: false
        };
    case TRUE_BROWSE:
        return{
            ...state,
            browse: true
        };
    case FALSE_BROWSE:
        return{
            ...state,
            browse: false
        };
    case TRUE_MESSAGES:
        return{
            ...state,
            messages: true
        };
    case FALSE_MESSAGES:
        return{
            ...state,
            messages: false
        };
    case TRUE_CART:
        return{
            ...state,
            cart: true
        };
    case FALSE_CART:
        return{
            ...state,
            cart: false
        };
    case TRUE_SERVICES:
        return{
            ...state,
            services: true
        };
    case FALSE_SERVICES:
        return{
            ...state,
            services: false
        };
    default:
        return state
}
}
export default rootReducer;

**ACTIONS\INDEX.JS**
import{TRUE_HOME, TRUE_BROWSE,
TRUE_CART, TRUE_MESSAGES,
TRUE_SERVICES, FALSE_BROWSE,
FALSE_CART, FALSE_HOME, FALSE_MESSAGES,
FALSE_SERVICES} from "../constants/action-types";

export const trueHome = home => ({type:
"TRUE_HOME", home: true
});
export const falseHome = home => ({type:
"FALSE_HOME", home: false
});
export const falseBrowse = browse =>({type:
"FALSE_BROWSE", browse: false
});
export const trueBrowse = browse => ({type:
"TRUE_BROWSE", browse: true
});
export const trueMessages = messages => ({type:
"TRUE_MESSAGES", messages: true
});
export const falseMessages = messages => ({type:
"FALSE_MESSAGES", messages: false
});
export const trueCart = cart => ({type:
"TRUE_CART", cart: true
});
export const falseCart = cart => ({type:
"FALSE_CART", cart: false
});
export const trueServices = services => ({type:
"TRUE_SERVICES", services: true
});
export const falseServices = services => ({type:
"FALSE_SERVICES", services: false
});

APP.JS

import store from "./store/index";
import { connect, Provider  } from 'react-redux';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {        
      timePassed: false,
      On: true,
    };
  }

  render() {
    setTimeout(() => {
      this.setState({timePassed: true})
    }, 500);
    if (!this.state.timePassed) {
      return <View style={{flex: 1}}>
        <StatusBar backgroundColor='transparent' translucent={true} barStyle='light-content'/><Splash/></View>;
    } else {
      return (
        <View style={styles.container}>
          <Provider store={store}>
            <RootStack/>
          </Provider>
        </View>
      );

    }
  }
}

从“/store/index”导入存储；
从'react redux'导入{connect，Provider}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={
时间流逝：错误，
对,，
};
}
render（）{
设置超时（（）=>{
this.setState（{timePassed:true}）
}, 500);
如果（！this.state.timePassed）{
返回
;
}否则{
返回(
);
}
}
}

使用动作和设置状态的子组件

//but i don't know how to use the action
 import { connect } from "react-redux";    
 <TouchableNativeFeedback onPress={() =>
                    props.navigation.navigate('Shop', {falseHome})}>

//但我不知道如何使用该操作
从“react redux”导入{connect}；
props.navigation.navigate（'Shop'，{falseHome}）}>

你就快到了；我可以看到您正在从react redux导入“connect”。浏览redux上的文档，了解connect的功能和使用方法。在组件能够“看到”状态的任何更改之前，您将需要它。任何关于redux的介绍都将向您展示如何做到这一点。因此，它不是一种教学资源；它适用于当您的代码有特定的编程问题时。@AdokiyeIruene我看到了很多问题：1）代码中的缩进很难理解。2） 在ACTIONS\INDEX.JS中导入常量（如

FALSE\u HOME

），但不使用它们。此外，您的操作正在传递从未使用过的数据：（例如：

消息：false

）3）如果您想在组件中分派redux操作，您必须连接到redux，我仍然看不到在这里发生这种情况。在文档中查找

mapDispatchToProps

。4） Redux

state

和Component

state

是两个完全不同的东西。redux状态的更改不会更改您的组件状态。@AdokiyeIruene关于组件、redux

状态

和组件

状态

：

this.setState（{}）更改组件状态。如果reducer处理已调度的操作，则已调度的操作将更改Redux状态。如果您通过
connect
和
mapstatetrops
连接到Redux
state
，您将在组件的
this.props中看到连接的Redux状态。
。每当更新
this.state
或
this.props
时，组件将重新渲染（如果连接的redux状态/存储发生更改，则可能会发生这种情况）。如果你仍然感到困惑，请阅读更多教程，从小事做起。感谢@jsplane的帮助