Noob Question: How To Subscribe A Redux Store

help
1

I’m now getting to understand the new js syntax, Meteor 1.3 beta 4 and Redux. I’m following a counter tutorial and all works: the getState() works in the console but trying to get it printer to the dom is proven difficult with FlowRouter.

//Just one big file lol

import React from 'react'
import { createStore, combineReducers } from 'redux'

var reducer = (state = 0, action) => {
  switch (action.type) {
  case 'ADD':
    return state + 1;
  case 'MINUS':
  return state - 1;
  default:
    return state;
  }
}

export const store = createStore(reducer)


function onAdd() {
  store.dispatch({ type: 'ADD' });
  console.log( store.getState() );
}

function onMinus() {
  store.dispatch({ type: 'MINUS' });
  console.log( store.getState() );

}

export const App = ({value}) => (
  <div>
    <h1>{value}</h1> // no bindings here
    <button onClick={onAdd}>+</button>
    <button onClick={onMinus}>-</button>
  </div>
);


export const Layout = ({content}) => (
    <div>
        <h1>My App</h1>
        <hr />
        <div>{content}</div>
    </div>
);

I dont know how to store.subscribe():

import React from 'react';
import {mount} from 'react-mounter';
import {Layout, App, store} from './this_one_big_file.jsx';

FlowRouter.route("/", {
  action() {
    mount(Layout, {
        content: (
          <App
            value={store.getState()} // should be able to pass in a prop reactively ?
          />)
    });
  }
});

The views:

764×508 12.2 KB

Sure when I click any button, the state is updated but only in console. I dont know how to subscribe using FlowRouter.

2

Maybe you’ll find this part of the documentation interesting:
http://rackt.org/redux/docs/basics/UsageWithReact.html

hints

  • Containers
  • Provider
  • connect
  • map…ToProps
1 Like