useSelector() 提供初始值而不是更新值?

时间:2021-03-20 19:04:38

标签: reactjs redux react-redux

我正在使用 redux 和 react-redux,但无法使用 useSelector() 函数来访问更新的值。

减速器
导入reducer内部的action
初始化状态
调用reducer并将状态初始化为初始状态
添加了更新初始状态的条件语句

import { UPDATE_EMAIL } from "../actions/cred";

const initialState = {
  phone: "",
  uid: null,
  tp: null,
};

const credReducer = (state = initialState, action) => {
  // return state;
  if (action.type === UPDATE_EMAIL) {
    return {
      ...state,
      phone: action.phone,
      uid: action.uid,
      tp: action.tp,
    };
  } else {
    return state;
  }
};

export default credReducer;

行动

export const UPDATE_EMAIL = "UPDATE_EMAIL";

export const updateEmail = (id, uid, tp) => {
  return { type: UPDATE_EMAIL, phone: id, uid: uid, tp: tp };
};

创建商店

function Root() {
  const [tkn, updateTkn] = useState("");
  const [type, updateType] = useState("");
  
  const rootReducer = combineReducers({
    auth: credReducer,
  });

  const store = createStore(rootReducer);
  store.subscribe(() => {
    console.log("in subscribe");
    console.log(store.getState().auth);
    updateType(store.getState().auth.tp);
    updateTkn(store.getState().auth.phone);
  }, []);

  return (
    <Provider store={store}>
      <NavigationContainer>
        {tkn === "" || tkn === null ? (
          <Auth />
        ) : type === "doctor" ? (
          <Doctor />
        ) : (
          <Vendor />
        )}
      </NavigationContainer>
    </Provider>
  );
}

获取商店价值

function Home() {
  const auth = useSelector((state) => state.auth);
  console.log("in home");
  console.log(auth);

  return (
    <View style={styles.box}>
      <Ucard />
    </View>
  );
}

export default Home;

最后是从上面的块中得到的输出 在此处输入图片说明 Home console log Output

1 个答案:

答案 0 :(得分:0)

这应该保留在组件之外。假设您更新 tkntype 状态,然后该函数将重新运行并再次创建新的存储和根减速器。

Store 将再次使用初始状态创建,而不是更新后的状态。

const rootReducer = combineReducers({
    auth: credReducer,
  });

  const store = createStore(rootReducer);
  store.subscribe(() => {
    console.log("in subscribe");
    console.log(store.getState().auth);
    updateType(store.getState().auth.tp);
    updateTkn(store.getState().auth.phone);
  }, []);