Komponent się nie re-renderuje Redux

0

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;

output.jpg
jak coś tu jest cały projekt https://github.com/bartek-fecko/socialApp bo jest dość dużo katalogów.

1

A próbowałeś?

const mapStateToProps = state => ({
  isLoading: state.mainPageArticlesReducers.isLoading,
  data: state.mainPageArticlesReducers.data,
  error: state.mainPageArticlesReducers.error,
})
0

Aha bo trzeba się odwoływać do globalnego state-u .... Dzięki za pomoc. teraz działa.

1

Spoko, ogólnie jest też dobrą praktyką robienie czegoś takiego:

const rootReducer = combineReducers({
   mainPageArticles: mainPageArticlesReducers,
});

A potem w mapStateToProps możesz zrobić const { mainPageArticles } = state ;)
Albo jeszcze lepiej: const mapStateToProps = ({ mainPageArticles }) => ...

1 użytkowników online, w tym zalogowanych: 0, gości: 1