denisraslov

import request from 'axios';

// Let's assume we need to get the user data through API.
// We create the action function that takes the user id 
// and make the async request.
export function getUser(id) {
    // We have access to the Dispather to dispath 
    // actions inside of the action function.
    return (dispatch) => {
        request

denisraslov

import React from 'react'
import { getUser } from 'actions'

class MyComponent extends React.Component {
    //...
    
    // Dispatch the imported action function with the Dispatcher
    // that you have because of react-redux.
    getUser(id) {
        this.props.dispatch(getUser(id));

denisraslov

import Header from 'views/header';
import Content from 'views/content';
import Footer from 'views/footer';

const Page = Backbone.View.extend({
  render() {
    const attributes = this.model.attributes;
    
    this.headerView = new Header(this.$('.header'), attributes);
    this.contentView = new Content(this.$('.content'), attributes);

denisraslov

import React from 'react';
import DashboardView from 'views/dashboard';

class DashboardPage extends React.PureComponent {
  
  // render an empty DIV and save a reference to it
  render() {
    return <div ref={node => this.node = node}></div>;
  }
  

denisraslov

function getInitialState() {
    const state = {};
 
    // Let's suggest that APP is our global Backbone app instanse, 
    // that keeps some models and collections.
    // We put the data from them into initial Redux state.
  
    state.account = APP.models.account.attributes;
    state.sellPoints = APP.collections.tasks.map(task => task.attributes);
    

denisraslov

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { getStore } from 'react/store';

import Content from 'react/components/content';
import Header from 'views/header';

const Page = Backbone.View.extend({
  render() {

denisraslov

import { getStore } from 'react/store';

const Task = Backbone.View.extend({
  events: {
    'click .saveName': function(e) {
        const name = this.nameInput.value;
      
        // Change the name of the task in the model
        this.model.set('name', name);
      

denisraslov

import AdminContent from 'views/adminContent';
import UserContent from 'views/userContent';

const Page = Backbone.View.extend({
  render() {
    const contentNode = this.$('.content')[0];
    
    // Use a method of the global app instance
    // (the model of the current user is hold there)
    if (APP.isAdminUser()) {

denisraslov

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

import AdminContent from 'react/components/adminContent';
import UserContent from 'react/components/userContent';

class Page extends React.PureComponent {
  
    // Use the state from the store
    isUserAdmin() {

denisraslov

import { getStore } from 'react/store';

const Task = Backbone.View.extend({
  listenToStore() {
    const taskId = this.taskId;
    const store = getStore();
    
    // Listen to changes of the Redux store
    store.subscribe(() => {
        const state = store.getState();