无法使用 redux 让计数器工作

Question

我正在学习 redux，但我无法让计数器工作。我设置了 action.js、reducer.js 和 store.js，并在 index.js 中创建了一个商店和一个提供者。我还在 App.js 中将 react-redux 用于 useSelector 和 useDispatch 我不知道我在这里缺少什么。

点击 App.js 时，计数器似乎没有增加。我在这里错过了什么？

非常感谢，提前：

//Reducer.js

const counterReducer = (state = 0,action) => {
    switch(action.type){
        case "INCREMENT":
            return state + action.payload
        case "DECREMENT":
            return state - action.payload
        default:
            return state
    }
}

export default counterReducer


//Action.js

const increment = (steps) => {
    return {
        type: 'INCREMENT',
        payload: steps
    }
}

const decrement = (steps) => {
    return {
        type: 'DECREMENT',
        payload: steps
    }
}


//store.js

import {createStore} from 'redux'
import counterReducer from './reducer'

const myStore = createStore(counterReducer)

export default myStore


//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux'
import myStore from './store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={myStore}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);


serviceWorker.unregister();


//App.js

import React from 'react';
import './App.css';
import {useSelector, useDispatch} from 'react-redux'
import {increment,decrement} from './action'

function App() {
  const counter = useSelector(state => state.counterReducer)
  const dispatch = useDispatch()
  console.log(counter)
  return (
    <div className="App">
       <h1>Counter {counter}</h1>
       <button onClick={() => dispatch(increment(2))}>+</button>
       <button onClick={() => dispatch(decrement(2))}>-</button>
    </div>
  );
}

export default App;

Answer 1

非常小的错误。

您没有使用combineReducers。 因此，无需引用 reducer 的名称来访问其在 store 中的状态。

在useSelector，应该是

  const counter = useSelector(state => state);

改为

  const counter = useSelector(state => state.counterReducer)