Использовать действие в компоненте - PullRequest
0 голосов
/ 27 августа 2018

Эй, я читал онлайн-уроки по редуксу. Я изучил то, что я понимаю из учебных пособий, теперь я хочу изменить состояние различных начальных состояний, которые я установил, я кодировал редуктор, действие и причину накопления, Я читал в учебнике, но я не знаю, как изменить состояния в моих компонентах на основе действий и редукторов, которые я установил, например, если я хочу сделать home ложным, я написал falseHome действие, которое сделает это, но я не знаю, как использовать это в моих компонентах, например, я хочу изменить состояние дома при навигации, используя 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>
      );

    }
  }
}

ДЕТСКИЙ КОМПОНЕНТ ДЛЯ ИСПОЛЬЗОВАНИЯ ДЕЙСТВИЙ И УСТАНОВЛЕНИЯ ГОСУДАРСТВА

//but i don't know how to use the action
 import { connect } from "react-redux";    
 <TouchableNativeFeedback onPress={() =>
                    props.navigation.navigate('Shop', {falseHome})}>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...