Mam problem. I nie mam pojęcia o co chodzi. Mianowicie mój connected komponent się nie rerenderuje. Wszystko działa poprawnie. State się zmienia. ( w redux dev tools tak samo) Output poniżej pochodzi z funkcji mapStateToProps, a jednak komponent się nie odświeża. State jest tworzony nowy a nie mutowany w reducerze więc jeśli ktoś ma jakiś pomysł bo ja nie mam pojęcia co jest nie tak.
Komponent:
import React, { Component, Dispatch } from 'react';
import { connect } from 'react-redux';
import * as A from 'redux/mainPageArticlesRedux/actions';
import * as C from 'redux/mainPageArticlesRedux/constants';
interface MainPageWrapperProps extends C.MainPageArticlesState {
requestArticles: () => void;
articlesPerPage?: number;
}
class MainPageWrapper extends Component<MainPageWrapperProps, {}> {
render() {
console.log(this.props)
return (
<>
{this.props.isLoading? <div>Loading...</div>:<code>{JSON.stringify(this.props.data)}</code>}
<button onClick={this.props.requestArticles}>Main page</button>
</>
)
}
};
const mapStateToProps = (state: C.MainPageArticlesState) => {
return {
isLoading: state.isLoading,
data: state.data,
error: state.error,
};
};
const mapDispatchToProps = (dispatch: Dispatch<C.MainPageArticlesActions>) => {
return {
requestArticles: () => dispatch(A.requestArticles())
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MainPageWrapper);
import * as C from './constants';
const articlesReducer = (state: C.MainPageArticlesState = C.initialState, action: C.MainPageArticlesActions) => {
switch (action.type) {
case C.MainPageArticlesTypes.ArticlesLoading:
return {
...state,
isLoading: action.isLoading,
}
case C.MainPageArticlesTypes.ArticlesRequestSucess:
return {
...state,
data: action.data,
isLoading: false,
}
case C.MainPageArticlesTypes.ArticlesError:
return {
...state,
error: action.error,
}
default:
return state;
}
}
export default articlesReducer;
jak coś tu jest cały projekt https://github.com/bartek-fecko/socialApp bo jest dość dużo katalogów.