React Redux需要小帮助

ny6fqffe  于 2023-03-30  发布在  React
关注(0)|答案(1)|浏览(122)

我已经能够为计数器应用程序设置基本的react redux,但由于一些问题(没有警告,没有错误),我无法读取组件中的默认计数器状态。
验证码:

const initialState = {counter:0}
const incrementReducer = (state = initialState, action)=> {
const {type, payload} = action;

  if (type == 'INCREMENT') {
    return {...state, counter:state.counter + 1 };
  }
return state;
}

const decrementReducer = (state = initialState, action)=> {
const {type, payload} = action;

  if (type == 'DECREMENT') {
    return {...state, counter:state.counter - 1 };
  }
return state;
}

const rootReducer = combineReducers({incrementReducer, decrementReducer});
  const store = createStore(rootReducer);
    // const store = createStore(incrementReducer);


function Counter() {
    const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);
  console.log({counter});
  return (
    <View style={styles.container}>
        <TouchableOpacity onPress={ () => dispatch({'type':'INCREMENT'})}>
      <Text style={styles.paragraph}>
        {counter}
      </Text>
          </TouchableOpacity>
    </View>
  );
}

export default function App() {
  return (
    <Provider store = {store}>
    <Counter/>
    </Provider>
  );
}

下面是运行它的代码的链接:https://snack.expo.dev/@iosdose/react-redux-counter

u4vypkhs

u4vypkhs1#

你编码

combineReducers({incrementReducer, decrementReducer})

让你最终得到一个形状为

{
  incrementReducer: counter,
  decrementReducer: counter
}

正如你所看到的,把它分成两个reducer是没有任何意义的,因为一个值只能上升,另一个值只能下降。
一般来说,你在这里遵循的是一种非常过时的Redux风格,所以我强烈建议你遵循the official Redux tutorial来学习现代的Redux。
Modern Redux(自2019年起)不使用switch..case reducers,ACTION_TYPES,不可变更新逻辑,createStore/combineReducers等。它的代码更少,更容易阅读和编写。你可以看到一个非常简短的现代Redux here介绍,但我真的建议你使用上面的教程。
我还建议你先在一个普通的React应用程序中遵循这一点,而不是使用React native,因为你可以在那里使用Redux devtools浏览器扩展。

相关问题