React Redux

 Redux

.... is State Container

  • read-only

  • change only with actions

previous state
dispatching action
next state

Reducers

React component

State

  • local and encapsulated within the component
  • can change at any time in the component’s lifecycle

Props

  • read-only
  • allow a parent component to pass attributes to a child component

Text

Text

React Redux

1 <Provider store>

 

... is responsible for pass the store down to others component
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { createStore, combineReducers } from 'redux';

import { App } from './App';
import { appReducer } from './reducer.jsx';


const appReducer = combineReducers({
    main: appReducer,
});


let store = createStore(reducer);


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('app'));
# Connected to the Store

# index.js

import { createStore, combineReducers } from 'redux';


import loginReducer from './containers/Login/reducer';


const appReducer = combineReducers({
    login: loginReducer,
});


let store = createStore(reducer);
2) Create Store
3) Apply reducers

2 Container 

 

... as a React component with a Redux connection.
  • mapStateToProps(state)
  • mapDispatchToProps ( )
  • connect(mapStateToProps, mapDispatchToProps)(<Container>);
import React from 'react';
import { connect } from 'react-redux';

import LoginForm from '../../components/loginForm'


export class Login extends React.Component {
  constructor(props) {
      super(props);
  }

  render() {
    return (
      <div>
        <LoginForm props={this.props} />
      </div>
    )
  }
};

const mapStateToProps = (state) => {
  return {
    isFetching: state.login.isFetching,
    isAuthenticated: state.login.isAuthenticated,
    token: state.login.token,
    errorMessage: state.login.errorMessage
  };
};

export default connect(mapStateToProps)(Login);
const OverviewSite = props => {

  const { site } = props;

  return (
    <div className="overview-site">
      <div className="site-address">
        <div className="site-icon">CC</div>
        <div className="site-address-info">
          <div>{site.name}</div>
          <div>{site.id}</div>
        </div>
      </div>
      <div className="site-score">{site.total_score}</div>
      <div className="site-priority">
        <div className="priority-color"></div>
      <div>{site.priority} Priority</div>
      </div>
      <div className="site-date-created">{site.created_at_date}</div>
    <div className="site-units">{site.units}</div>
    <div className="site-borough">{site.borough}</div>
    </div>
  )
}

export default OverviewSite;

3) Presentational

 

Conclusion

Thank you for your attention!

Copy of Django, React, Redux, Saga

By Hack Bulgaria

Copy of Django, React, Redux, Saga

  • 1,107