Text does not appear using React Hooks with Redux

Question

I’m trying to get a string saved in my store state and put it in a text component, but the text is not showing up.

To call the string, I’m doing it this way:

import {useSelector} from 'react-redux'

const OhSnap = () => {


    const text = useSelector(state => state.data)

    return(
      <View style={{flex:1}}>
        <Text style={{fontSize: 15,color:'white',fontWeight:'bold',textAlignVertical: 'center',margin: 5,textAlign:'center'}}>{text}</Text>
      <View>
)}

export default OhSnap

On my return I declared variable as follows:

const initialState = {
  data: 'Please show up on the component'
};

I don’t understand why that would be wrong..

PS:I only have a screen that uses Hooks, and use the old Redux with mapstatetoprops on several other screens.

Answer 1

Actually, I think you’re riding it wrong. I will try to do a step by step for you. The error is not in useSelector. You are using it correctly. The problem is that what useSelector is trying to select is not a store state. The setting is wrong. There’s a whole structure behind it, you see, I hope you can do it, if you already know and the mistake is not this I apologize.

First, you must get your main component involved by the context component of React-Redux, usually the main component is index.js.

index js.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

app js.

import { Provider } from "react-redux";
import Store from "./store";
import OutroComponente from './components/outro';

const App = () => {
  return (
    <Provider store={Store}>
      <OutroComponente />
    </Provider>
  );
};

export default App;

Provider needs the store configuration that is in the store.js file requested above. See the code for the store.js file

store js.

import { createStore } from 'redux';
import dataReducer from './dataReducer';

const Store = createStore(combineReducers({
    data: dataReducer,
    // Outros state caso precise aqui
  }
);

export default Store;

I just created a state store called data since that’s what you expect, but then you can add as many state you want. It is this name that you bind through the useSelector in the component.

Now you need to configure the date reset, I left in another file also for organization. It would look like this:

dataReducer.js

import { LOAD_SCHEDULED_SERVICES } from '../actions/actionTypes';

const initialState = 'Please show up on the component'

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_DATA:
      return action.payload;
    default:
      return state;
  }
};
export default dataReducer;

SET_DATA is used with Hooks useDispatch to change the store value and the useSelector to fetch the store value.

So, in any component that is now, if you want to get the value of the store state data is enough:

const text = useSelector(state => state.data)

I hope I helped you, anything, if I messed up what I wanted to say I apologize. Thanks bro