时间戳

首页 > 解决方案 > 如何使用redux在2个屏幕之间传递数据并仅反应本机

reactjs - 如何使用redux在2个屏幕之间传递数据并仅反应本机

问题描述

我想仅使用 redux 将 dropdownSelect 的值从 View1 传递到 View2

查看1****

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

查看2***

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

这是我的动作文件

动作.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>
      </>
    );
  }
}

这是我的完整代码，在 View2 中，我不知道如何调用从下拉列表中选择的值，也许我的代码中还有其他错误请帮我解决这个问题:)

标签： reactjsreact-nativereact-redux

解决方案

查看 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;

查看 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>
   </>
   );
  }
}

推荐阅读