组件未更新（react-redux）

Question

i'm another guy with the same question; Sorry, but I could not see yet my error.I'm suspecting is something about mutation, but I tried (almost) everything, getting mad. My component is not updating when I add stuff to my store, it seems is rendering just for once (first time)

I was trying with lifecycles but nothing

ACTION


export default async function getJoke() {
    let jk = await axios.get('https://jokeapi.p.rapidapi.com/category/any' ,{ headers :{
        'x-rapidapi-host' :  'jokeapi.p.rapidapi.com',
        'x-rapidapi-key'  : "***********************" }} );

    let joke;
    if(jk.data.type === 'single') {
        joke = jk.data.joke 
    }  else {
        joke = { setup : jk.data.setup,
                 delivery : jk.data.delivery}
    }

   let getjoke = {
       type : 'GETJOKE',
       joke
   } 
   store.dispatch(getjoke) ;   
}


REDUCER

let initialState = { jokes : [ ] };

function joke (state = initialState, action) {
    switch (action.type) {
        case 'GETJOKE' : return {...state,
             jokes :[...state.jokes, {jokes: action.joke}]
             } ;
        default : return state;
    }
}
export default joke;

REDUCER-INDEX

import { combineReducers } from 'redux';
import joke from './joke'

export default combineReducers ({
    joke 

})

STORE 

import { createStore } from 'redux';
import Combined from './reducer';
export default createStore(Combined);


COMPONENT

import React from 'react';
import BotJoke from './btnJoke';
import {connect} from 'react-redux';
import store from '../store'

 class joke extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             jokes : props.jokes
         }
         console.log('MENDA',this.state.jokes);

     }
     componentDidMount() {
         console.log('willdisssd receive props');
/*          this.setState({jokes : [...this.state.jokes, nextProps]})
 */
     }

     componentWillMount(){
         console.log('will mount',this.state.jokes);
         console.log('Entra');
         console.log('NEXT PROPS');


     }

   render() {
   return (
       <div>
           <BotJoke/>
           { this.state.jokes !== undefined  ? <h1>Hay bromas</h1>: <h1>NO HAY BROMAS</h1> } 
       </div>
   )
 } }


function mapStateToProps (state) {
    console.log('STorE', store.getState());
    return {
        jokes : state.jokes
    }

}

let connection = connect(mapStateToProps)(joke);
export default connection;

Answer 1

What you are doing is an anti pattern, using the props to setState though you can just use props directly instead.

Use this.props.jokes everywhere in your component, it should work. Let me know.

EDIT:

Assuming you want the jokes to be an array:

REDUCER

let initialState = { jokes : [ ] };

function joke (state = initialState, action) {
    switch (action.type) {
        case 'GETJOKE' : return {...state,
             jokes :[...state.jokes, action.joke]
             } ;
        default : return state;
    }
}
export default joke;

REDUCER-INDEX

import { combineReducers } from 'redux';
import joke from './joke'

export default combineReducers ({
    joke 

})

STORE 

import { createStore } from 'redux';
import Combined from './reducer';
export default createStore(Combined);


COMPONENT

import React from 'react';
import BotJoke from './btnJoke';
import {connect} from 'react-redux';
import store from '../store'

 const joke = (props) => {

   const length = props.jokes.length

   return (
       <div>
           <BotJoke/>
           { length !== 0  ? <h1>{JSON.stringify(props.jokes[length-1])}</h1>: <h1>NO HAY BROMAS</h1> } 
       </div>
   )
 }



function mapStateToProps (state) {
    console.log('STorE', store.getState());
    return {
        jokes : state.jokes
    }

}

let connection = connect(mapStateToProps)(joke);
export default connection;