0

I create the component, connect it to redux, initialized the state and created reducer.

Component:

import fetchReducer from './reducers/fetchReducer';
import initialState from './constants/initialState';

const store = createStore(fetchReducer, initialState, devToolsEnhancer());

class Table extends React.Component {
  // constructor

   getDataFromState = function () {
      let propsContent = this.props;
      let itemsStored = propsContent.itemsProp;
      return itemsStored;
     };

   getOperationItems = function () {
      let itemsStored = this.getDataFromState();
      itemsStored.map((item, index) => (
          <li> key={index} item={item}</li>
       ))};

   render() {
       return (
           <div className={styles}>
               {this.getOperationItems()}
           </div>
         );
     }
 }

 const mapStateToProps = (store) => {
     return {itemsProp: store.items}
  };

 export default connect(mapStateToProps)(Table)

ReactDOM.render(
   <Provider store={store}>
       <Table/>,
    </Provider>,
   document.getElementById("app")
);

Initial state:

export default {
   items: [
      {
        'Date': 1,
        'Operation': 1
       }
     ]
 }

Reducer:

 import initialState from '../constants/initialState';

 export default function update(state = initialState) {
           return state;
  }

But I cant get the initial data from store. Debugging, I see in method Table#getDataFromState that propsContent contains the empty ({}) array - not the expected [{'Date': 1,'Operation': 1 }].

Debugging also I see, that reducer receive the initial state with properly data: [{'Date': 1,'Operation': 1}]

1
  • 1
    Unrelated, but your getOperationItems function doesn't return anything, you need to return itemsStored.map(...) Commented Jan 4, 2021 at 10:42

1 Answer 1

1

How do you register the reducer passed to createStore? It is important in order to use it into mapStateToProps:

You can look here an example on how to register a reducer

UPDATES

The problem is how you are using the connected component Table. If you define it in another file and then import it, your code works perfectly, as you can see here

Sign up to request clarification or add additional context in comments.

5 Comments

I don't understand clearly, what do mean under 'registed reducer'. In given example combine of reducers is used. But if I'm not able to use 'combineReducers'? Could you make me some clear in example given about reducers registry, please.
What is "fetchReducer"? How do you define it? It's important for retrieving it in mapStateToProps, but from your code i can't understand it. Could you show me?
I import it in my index.jsx. So "import fetchReducer from './reducers/fetchReducer';"
Ok, so the the problem isn't in how you are using the reducer. Sorry, I don't see the problem :(
harlott, perfectly! Your last advice worked! Earlier I intended to separate Provider to a container component, but for some reasons I hesitated. Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.