使用React Hooks时将Redux状态设置为默认状态

npm install redux react-redux

// reducer.js

const initialState = {
  // 定义默认状态
  counter: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    // 处理其他action
    default:
      return state;
  }
};

export default reducer;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

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

// MyComponent.js

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  useEffect(() => {
    // 设置默认状态
    dispatch({ type: 'SET_DEFAULT' });
  }, [dispatch]);

  return (
    <div>
      <p>Counter: {counter}</p>
    </div>
  );
};

export default MyComponent;