Looking for react-redux Answers? Try Ask4KnowledgeBase
Looking for react-redux Keywords? Try Ask4Keywords

react-reduxKomma igång med react-redux


Anmärkningar

React Redux är ett bibliotek som tillhandahåller React bindningar för Redux.

Reactkomponenter som känner till Redux-butiken kallas "Containers", "Smart Components" eller "Higher Order Component" (HOC). Sådana komponenter, för att använda Redux, behöver:

  • Prenumerera på butiken för att få uppdateringar från Redux-butiken
  • Skicka åtgärder

Att göra detta för hand skulle innebära att du använder store.subscribe och store.dispatch(action) i React-containrar.

React Redux förenklar bindningen mellan Redux-butiken och en React container-komponent genom connect , som kartlägger Redux-statusegenskaper och Action-skapare till komponentens rekvisita.

connect är en funktion som skapar en högre ordningskomponent. Connect accepterar mapStateToProps funktioner ( mapStateToProps , mapDispatchToProps , mergeProps ) och returnerar en behållarkomponent, som lindar den ursprungliga komponenten för att göra den till en "ansluten" komponent:

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

export default connect(mapStateToProps, mapDispatchToProps)(Customers);

Se exempelavsnittet för ett komplett exempel.

Eftersom alla behållarkomponenter måste komma åt Redux-butiken är det rekommenderade sättet att använda en speciell <Provider> -komponent i React Redux, som överför butiken till alla barnkomponenter (internt med React-kontext).

Officiell dokumentation: http://redux.js.org/docs/basics/UsageWithReact.html

GitHub-repo: https://github.com/reactjs/react-redux

versioner

Version Utgivningsdatum
5.0.3 2017/02/23
5.0.2 2017/01/11
5.0.1 2016/12/14
5.0.0 2016/12/14
4.4.6 2016/11/14
4.4.5 2016/04/14
4.4.4 2016/04/13
4.4.3 2016/04/12
4.4.0 2016/02/06
4.3.0 2016/02/05
4.2.0 2016/02/01
4.1.0 2016/01/28
4.0.0 2015/10/15
3.0.0 2015/09/24
2.0.0 2015/09/01
1.0.0 2015/08/24
0.5.0 2015/08/07
0.1.0 2015/07/12

Komplett exempel

Anta att vi har behållare "CustomersContainer" som ansluter en "kunder" dum komponent till Redux-butiken.

I index.js:

import { Component }, React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './redux/rootReducer';
import CustomersContainer from './containers/CustomersContainer';

let store = createStore(rootReducer);

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

I kunderContainer:

import React, { Component } from 'react';
import { connect } from 'react-redux';

// Import action creators
import { fetchCustomers } from '../redux/actions';

// Import dumb component
import Customers from '../components/Customers';

// ES6 class declaration
class CustomersContainer extends Component {
  componentWillMount() {
    // Action fetchCustomers mapped to prop fetchCustomers
    this.props.fetchCustomers();
  }

  render() {
    return <Customers customers={this.props.customers} />;
  }
}

function mapStateToProps(state) {
  return {
    customers: state.customers
  };
}

// Here we use the shorthand notation for mapDispatchToProps
// it can be used when the props and action creators have the same name 
const CustomersContainer = connect(mapStateToProps, { fetchCustomers })(CustomersContainer);

export default CustomersContainer;
 

Hej världen använder React Redux

Den här guiden förutsätter att du redan har installerat react , redux , react-router och react-redux och har konfigurerat react , redux och react-router . Om du inte har det, gör det.

Obs! Medan react-router inte är beroende av react-redux , är det mycket troligt att vi kommer att använda den i vår reaktionsapplikation för routing och detta gör det verkligen enkelt för oss att använda reaktor-redux.


FILENAME: app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import store from './stores';

render(
  (
    <Provider store={ store }>
      <Router history={ browserHistory }>
        {/* all the routes here */}
      </Router>
    </Provider>
  ),
  document.getElementById('app')
);
 

Denna fil kommer att vara vettig för de flesta av er. Vad vi gör här är att få butiken från ./stores och vidarebefordra den till alla rutter med hjälp av Higher Order Component Provider tillhandahålls av react-redux .

Detta gör butiken tillgänglig i hela vår applikation.


Låt oss nu överväga detta scenario . Vi har en komponent UserComponent som hämtar data från user och har en knapp som när du klickar uppdaterar data i butiken.

Applikationsstruktur

Vår rootReducer har user

const rootReducer = combineReducers({
    user: userReducer,
})
export default rootReducer;
 

Vår userReducer ser ut så här

const default_state = {
  users: [],
  current_user: {
    name: 'John Doe',
    email: 'john.doe@gmail.com',
    gender: 'Male'
  },
  etc: {}
};

function userReducer( state=default_state, action ) {

  if ( action.type === "UPDATE_CURRENT_USER_DATA" ) {
    return Object.assign( {}, state, { current_user: Object.assign( {}, state.current_user, { [action.payload.field]: action.payload.value } ) } );
  }
  else {
    return state;
  }

}

export default userReducer;
 

Och vår actions ser ut så här

export function updateCurrentUserData( data ) {
  return {
    type: "UPDATE_CURRENT_USER_DATA",
    payload: data
  }
}
 

Slutligen, Låter oss arbeta med vår komponent

FILENAME: UserComponent.js

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    // do nothing
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

export default UserComponent;
 

Naturligtvis kommer det inte att fungera , eftersom vi inte har anslutit det till butiken än.

Om du undrar är detta en statslös funktionell komponent , eftersom vi använder redux och vi egentligen inte behöver ett internt tillstånd för vår komponent, det är rätt tid att använda den.

connect som tillhandahålls av react-redux tar in tre parametrar

mapStateToProps , mapDispatchToProps och själva komponenten .

connect( mapStateToProps, mapDispatchToProps )(Component)


Låt oss lägga till anslutning till vår komponent UserComponent tillsammans med mapStateToProps och mapDispatchToProps

Och låt oss också uppdatera vår ChangeUserDetails- funktion, så när den kallas kommer den att dispatch en action till våra reducers , och baserat på vilken typ av handling vår reducerare kommer att sparka in och göra ändringar i butiken, och när butiken uppdaterade react-redux kommer att -lämna vår komponent med de nya uppgifterna.

Låter det komplicerat? Det är det verkligen inte.

Vår UserComponent.js kommer att se ut

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

const mapStateToProps = ( state, ownProps ) => {
  return {
    current_user: state.user.current_user,
  }
}

const mapDispatchToProps = ( dispatch, ownProps ) => {
  return {
    updateCurrentUserData: (payload) => dispatch( Action.updateCurrentUserData(payload) ),
  }
}


let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    props.updateCurrentUserData({ field: field, value: value });
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

const ConnectedUserComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserComponent)

export default ConnectedUserComponent;
 

Vad vi gjorde här läggs till

  • mapStateToProps: Detta ger oss möjlighet att få data från butik och när att data förändringar kommer vår komponent åter återges med de nya uppgifterna.

    Vår komponent kommer endast att återges om de uppgifter som vår komponent begär förändringar i butiken och inte när någon annan data ändras i butiken.

  • mapDispatchToProps : Detta tillåter oss att dispatch actions till alla reduceringsapparater från vår komponent .. (kan vara vilken komponent som helst), och baserat på type av åtgärd kommer vår userReducer att sparka in och returnera ett nytt tillstånd med uppdaterade data.

  • ConnectedUserComponent : Slutligen anslutade vi vår komponent till butiken med connect genom att passera alla parametrar och exported den anslutna komponenten.

  • Vi uppdaterade även våra changeUserDetails fungera att ringa method på rekvisita och även passera i uppgifterna., Och props i sin tur skickar den metod vi kallade att alla reduceringar.


NOTERA:

  • Om vi inte returnerar ett nytt tillstånd från reducerare, kommer react-redux inte att återge vår komponent.

Installation eller installation

Att använda redux direkt med react kan verka lite svårt. När det gäller varje component du vill uppdatera när butiken ändras måste du prenumerera den komponenten till redux store

React Redux tar hand om alla dessa och gör det riktigt enkelt att skriva komponenter som kan begära den information den behöver från redux store och bli meddelad Endast när dessa data ändras., Detta gör att vi kan skriva riktigt effektiva komponenter.

För att installera react-redux behöver du bara köra detta npm kommando

npm install --save react-redux
 

Och du är klar.


Obs: React Redux är beroende av

  • React (version 0.14 eller senare) och
  • på nytt