Приложение Redux-React: Как переделать мое приложение, чтобы вместо mapStateToProps и matchDispatch были useSelector и useDispatch?

Question

У меня есть компонент класса App. Но мне нужно преобразовать мой компонент в функциональный компонент и переделать мое приложение, чтобы вместо mapStateToProps и matchDispatch были useSelector и useDispatch. Но я никогда не работал с useSelector и useDispatch. Поэтому, пожалуйста, помогите мне. Компонент реализует кнопку «Мне нравится», при нажатии на нее - приращение числа на единицу.

Индекс. js:

//action
const plusLike = index => ({
    type: "PLUS_LIKE",
    payload:index
});

//reducer
const reducer = (state={like:0},action) =>{
    switch(action.type){
        case "PLUS_LIKE":
            return Object.assign({},state, {
               like: action.payload
            });
        default:
            return state
    }
};

//it must be functional component
class App extends React.Component{
    render(){
        return (
        <div>
           <button onClick={index => this.props.onPlusLike(this.props.onLike+1)}>Like</button>
          {this.props.onLike}   
        </div>                         
        );
    }
}

//mapStateToProps
const mapStateToProps = state => ({
    onLike: state.propReducer.like
});

//matchDispatchToProps
const matchDispatchToProps = dispatch =>({
    onPlusLike: index => dispatch(plusLike(index))
});

const allReducers = combineReducers({
    propReducer:reducer
});

const ConnectApp = connect(
     mapStateToProps,
     matchDispatchToProps
)(App);

const store = createStore(allReducers);

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

Answer 1

Вот как вы можете поменять местами mapStateToProps и mapDispatchToProps с useSelector и useDispatch в React. Обратите внимание, что это не работает с классами.

import { useSelector, useDispatch } from "react-redux";
import plusLike from 'your-actions'

function App() {
  const likes = useSelector((state) => state.propReducer.like);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={(index) => dispatch(plusLike(likes+1))}>Like</button>
      {likes}
    </div>
  );
}

export default App