Salman Salman - 1 month ago 10
React JSX Question

react:initialize value for the redux state

I amtrying to initialize a component with a default value in redux state.
Here is the code to call the root node:

const str="Italy quake: Norcia tremor destroys ancient buildings";
const words = str.split(" ");
const preloadedState = { randomWords: {
activeWord:0,
activeLetter:0,
words:words
}};

ReactDOM.render(
<Provider store={createStore(root_reducer,preloadedState)}>
<App />
</Provider>,document.getElementById('root')
);


and the combineReducers is:

import {combineReducers} from 'redux';
import RandomWords from './RandomWordsReducer';
import Score from './ScoreReducer';

const root_reducer=combineReducers({
randomWords:RandomWords,
score:Score
});


export default root_reducer;


and in the container, i have connected the component with redux:
(I am sure the component and the redux are connected)

function mapStateToProps(state){

return ({words:state.words,
activeLetter:state.activeLetter,
activeWord:state.activeWord});
}

export default connect(mapStateToProps)(RandomWords);


Then on the Component I have:

export default class RandomWords extends Component{

render(){
console.log("words are:"+this.props.words);
return(<div>
{ this.props.words }
</div>)
}
}


The problem is:
In the line
console.log("words are:"+this.props.words);
i expect to see an array of words, meanwhile it is undefined.

What is wrong with the code?

Answer

There is no state.words, only a state.randomWords.words:

return ({words:state.randomWords.words,
        activeLetter:state.randomWords.activeLetter,
        activeWord:state.randomWords.activeWord});