Как бы виглядел этот код если бы вместо mapStateToProps и matchDispatch были useSelector и useDispatch?

Question

[cosonicsq]

У меня есть классовый компонент. Но мне нужно переделать мой компонент в функцыональний и переделать соотвественно чтобы вместо mapStateToProps and matchDispatch у меня были useSelector and useDispatch. Но я никогда не использовал useSelector and useDispatch. А в документации react-redux не очень понятный пример.
Компонент реализует очень простой функционал: Когда нажал на кнопку - число справа от кнопки увеличивается на один.

Index.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
    }
};

//это должен быть функциональный компонент
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

[real2210]

Если очень вкратце то

const like = useSelector(state => state.propReducer.like);

const dispatch = useDispatch();

///....
dispatch(onPlusLike(props.onLike+1))

Answer 2

[Loli E1ON]

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


const initialState = {
   like: 0
};

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

const App = () => {

    const likes = useSelector(state => state.propReducer.like);
    const dispatch = useDispatch();

    return (
        <div>
            <button onClick={ () => dispatch(plusLike(likes+1))}>Like</button>
            { likes }
        </div>
    );
}



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

const store = createStore(allReducers);
ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById("root"));

Comments

[cosonicsq]

спасибо)