Question

嘿，我一直在在线阅读redux教程，我遵循了从教程中了解的内容，现在我想更改已设置的不同初始状态的状态，我对reducer，action和store进行了编码，原因是我已经阅读了本教程，但是我不知道如何根据设置的操作和化简器来更改组件中的状态，例如，如果我想将home设置为false，则我写了一个{ {1}}操作可以做到这一点，但是我不知道如何在我的组件中使用它，例如，我想在导航时使用home来更改home的状态，使用falseHome，我们将不胜感激，在这里可以学习，谢谢。

falseHome

APP.JS

**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
});

使用操作和设置状态的儿童组件

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>
      );

    }
  }
}

在组件中使用动作

0 个答案: