i want to pass value of dropdownSelect from View1 to View2 using redux only

View1****

function View1(props) {
  const [val, setVal] = React.useState(null);

  function handleSelect(e) {
    setVal(e);
    if (e !== null) {
      props.GetDropDownValue(e);
    }
    console.log(data[e]);
    console.log(e);
  }
  const data = ["op1", "op2", "op3", "op4", "op5", "op6"];
  return (
      <Text style={styles.text}>View 1</Text>
      <ModalDropdown
        options={data}
        defaultValue="default"
        onSelect={handleSelect}
      />
  );
}

const mapDispatchToProps = {
  GetDropDownValue,
};

export default connect(null, mapDispatchToProps)(View1);

View2***

function View2(props) {
  return (
      <Text style={{ fontSize: 30, color: "white" }}>
        value is :{???}
      </Text>
  );
}

function mapStateToProps(state) {
  return {
    vals: state.vals,
  };
}
export default connect(mapStateToProps)(View2);

this is my action file

action.js***

export function GetDropDownValue(DPValue) {
  return {
    type: "GET_VALUE",
    DPValue: DPValue,
  };
}

ReduxApp.js***

const initialState = {
  dropdownValue: 0,
};

function dropdown(state = initialState.dropdownValue, action) {
  switch (action.type) {
    case "GET_VALUE":
      return action.DPValue
    default:
      return state;
  }
}

const store = createStore(dropdown);

export default class ReduxApp extends Component {
  render() {
    return (
      <>
        <Provider store={store}>
          <View style={styles.container}>
            <View1 />
            <View2 />
          </View>
        </Provider>
      </>
    );
  }
}

this my full code, in the View2 ,i don't know how to call the value selected from dropdown ,maybe there are other mistakes in my code please help me to solve this problem :)

CodePudding user response：

View 1-

function View1() {
  const [val, setVal] = React.useState(null);
  const dispatch=useDispatch();//import {useDispatch} from "react-redux"

  function handleSelect(e) {
    setVal(e);
    if (e !== null) {
      dispatch(GetDropDownValue(e));
     }
   console.log(data[e]);
   console.log(e);
  }
const data = ["op1", "op2", "op3", "op4", "op5", "op6"];
  return (
  <Text style={styles.text}>View 1</Text>
  <ModalDropdown
    options={data}
    defaultValue="default"
    onSelect={handleSelect}
  />
 );
}

export default View1;

View 2-

function View2() {
 const dropdownValue=useSelector(state=>state.dropdownValue);
 //import {useSelector} from "react-redux"
 return (
  <Text style={{ fontSize: 30, color: "white" }}>
    value is :{dropdownValue}
  </Text>
  );
}


export default View2;

ReduxApp.js***

const initialState = {
  dropdownValue: 0,
};

function dropdown(state = initialState.dropdownValue, action) {
  switch (action.type) {
    case "GET_VALUE":
      return {
            ...state,
            dropdownValue:action.DPValue
             }
   default:
      return state;
  }
}

const store = createStore(dropdown);

export default class ReduxApp extends Component {
  render() {
   return (
     <>
      <Provider store={store}>
      <View style={styles.container}>
        <View1 />
        <View2 />
      </View>
     </Provider>
   </>
   );
  }
}