CODEWITHSUNDEEP
javascriptreactjsredux
themazz
themazz

Reputation: 1137

Redux on functional components in Reactjs (web)

I am writing this question cause I would like to ask you for some help in how to use the redux on my functional components. I had a look at other examples with React components but I cannot understand how to get the "store" value in functional components.

My idea is to use my

store.getState()

To check states and interact with the UI, inside my functional component but I cannot make it happen.

Any help please ?

For example, a functional component : 

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import { Navbar, Nav } from 'react-bootstrap';
import HeaderMenu from '../HeaderMenu';
import cx from 'classnames';

function Header() {
  return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}>
      <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav>
      <HeaderMenu />
    </Navbar>
  );
}

export default withStyles(s)(Header);

How can I use the "store" object inside my Header component ? It works on my App component, just I don't know how to use it within my components.

My questions are:

Thanks in advance!

EDIT :

I am using https://github.com/kriasoft/react-starter-kit with the redux branch https://github.com/kriasoft/react-starter-kit/tree/feature/redux

Upvotes: 9

Views: 21066

Answers (5)

Miguel Coder
Miguel Coder

Reputation: 1954

As of version 7.x react-redux now has hooks for functional components.

Header.jsx

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import { Navbar, Nav } from 'react-bootstrap';
import HeaderMenu from '../HeaderMenu';
import cx from 'classnames';
import { useSelector } from 'react-redux'

function Header() {
  const store = useSelector(store => store)
  return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}>
      <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav>
      <HeaderMenu />
    </Navbar>
  );
}

export default withStyles(s)(Header);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

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

Upvotes: 7

user7024499
user7024499

Reputation: 961

If you want to get the Redux state on a functional component, you either have to manually connect the component and Redux, which is very tedious. You would have to access the reducer variable inside your React Component, meaning import the reducer into the component file among other configurations.

This would interfere with other benefits you would normally get, such as action creators, dispatching actions automatically through middleware, and more.

A cleaner idea is to just use the Provider Component that comes with React-Redux to turn your Header component into a Container. A Container is a react component that 'listens for' any changes that have been made to the store. You are essentially wrapping your Header component in a higher order component that is connected directly to the redux store.

This way is more scalable and you can easily create a boilerplate file that can be used with any React/Redux project.

Upvotes: 1

Andrea Korinski
Andrea Korinski

Reputation: 275

You can use react-redux library, and using connect you will access your store data as a component props - it's easy and efficient.

Upvotes: 0

Scarysize
Scarysize

Reputation: 4281

Try to understand the individual modules/components a boilerplate project contains before going with it. If you are new to react (and its complementary libraries) I recommend you start here:

For redux:

These are both great ressources which clarify the majority of react related questions on stackoverflow.

Upvotes: 0

luboskrnac
luboskrnac

Reputation: 24561

As Dan Abramov mentioned in his insanely famous Egghead.io series, presentational component shouldn't be aware of Redux store and shouldn't use it directly. You should create something called container component, which will pass necessary state fields + action callbacks to your presentational component via properties.

I highly recommend to watch Dan Abramov's Egghead.io series if above concepts are not familiar to you. Patterns he is describing there are de facto standard style guide for writing React+Redux applications nowadays.

Upvotes: 7

Related Questions