Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Super minimal React + Redux app
import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';
const AVAILABLE_SUBREDDITS = ['apple', 'pics'];
// ------------
// reducers
// ------------
function selectedReddit(state = 'apple', action) {
switch (action.type) {
case 'SELECT_REDDIT':
return action.reddit;
default:
return state;
}
}
function postsByReddit(state = { }, action) {
switch (action.type) {
case 'RECEIVE_POSTS':
return {
...state,
[action.reddit]: action.posts
}
default:
return state;
}
}
// --------------
// action creators
// --------------
function selectReddit(reddit) {
return {
type: 'SELECT_REDDIT',
reddit
};
}
function receivePosts(reddit, json) {
return {
type: 'RECEIVE_POSTS',
reddit: reddit,
posts: json.data.children
};
}
function fetchPosts(reddit) {
return dispatch => {
return fetch(`http://www.reddit.com/r/${reddit}.json`)
.then(req => req.json())
.then(json => dispatch(receivePosts(reddit, json)));
};
}
function fetchPostsIfNeeded(reddit) {
return (dispatch, getState) => {
if (!getState().postsByReddit[reddit]) {
return dispatch(fetchPosts(reddit));
}
};
}
// ------------
// app
// ------------
function logger({ getState }) {
return next => action => {
console.info('dispatching', action);
const result = next(action);
console.log('state after', getState());
return result;
};
}
const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore);
const reducer = combineReducers({ selectedReddit, postsByReddit });
const store = createStoreWithMiddleware(reducer);
function fetchDataForMyApp(props) {
const { selectedReddit } = props;
return fetchPostsIfNeeded(selectedReddit);
}
@provide(store)
@connect(state => state)
class MyApp extends Component {
componentDidMount() {
const { dispatch } = this.props;
dispatch(fetchDataForMyApp(this.props));
}
componentWillReceiveProps(nextProps) {
const { dispatch } = this.props;
if (nextProps.selectedReddit !== this.props.selectedReddit) {
dispatch(fetchDataForMyApp(nextProps));
}
}
handleChange(nextReddit) {
this.props.dispatch(selectReddit(nextReddit));
}
render () {
const { selectedReddit, postsByReddit, dispatch } = this.props;
const posts = postsByReddit[selectedReddit];
return (
<div>
<Picker value={selectedReddit}
onChange={::this.handleChange}
options={AVAILABLE_SUBREDDITS} />
<Posts posts={posts} />
</div>
);
}
}
class Picker extends Component {
render () {
const { value, onChange, options } = this.props;
return (
<header>
<h1>{value}</h1>
<select onChange={e => onChange(e.target.value)}
value={value}>
{options.map(option =>
<option value={option} key={option}>
{option}
</option>)
}
</select>
</header>
);
}
}
class Posts extends Component {
render () {
if (!this.props.posts) {
return <p>Nothing here yet...</p>;
} else {
return this.renderPosts();
}
}
renderPosts () {
return (
<ul>
{this.props.posts.map((post, i) =>
<li key={i}>{post.data.title}</li>
)}
</ul>
);
}
}
React.render(
<MyApp />,
document.body
);
@khanhhua

This comment has been minimized.

Copy link

@khanhhua khanhhua commented Feb 18, 2016

bindActionCreators is not used.

@amcdnl

This comment has been minimized.

Copy link

@amcdnl amcdnl commented Feb 24, 2016

using provide from react-redux@4.4.0 gives me this:

Viz.js:26 Uncaught TypeError: (0 , _reactRedux.provide) is not a function(anonymous function) @ Viz.js:26(anonymous function) @ Viz.js:32$ @ system.src.js:4892d.execute @ system.src.js:4892i @ system.src.js:4892s @ system.src.js:4892(anonymous function) @ system.src.js:4892a @ system.src.js:4892(anonymous function) @ route.js:13(anonymous function) @ route.js:26$ @ system.src.js:4892d.execute @ system.src.js:4892i @ system.src.js:4892n @ system.src.js:4892execute @ system.src.js:4892b @ system.src.js:4892x @ system.src.js:4892p @ system.src.js:4892h @ system.src.js:4892(anonymous function) @ system.src.js:4892
system.src.js:4892 Uncaught Uncaught TypeError: (0 , _reactRedux.provide) is not a function
    Evaluating http://10.211.55.5:9000/dist/app/viz/Viz.js$ @ system.src.js:4892d.execute @ system.src.js:4892i @ system.src.js:4892s @ system.src.js:4892(anonymous function) @ system.src.js:4892a @ system.src.js:4892(anonymous function) @ route.js:13(anonymous function) @ route.js:26$ @ system.src.js:4892d.execute @ system.src.js:4892i @ system.src.js:4892n @ system.src.js:4892execute @ system.src.js:4892b @ system.src.js:4892x @ system.src.js:4892p @ system.src.js:4892h @ system.src.js:4892(anonymous function) @ system.src.js:4892
undefined:1 Uncaught (in promise) Uncaught Uncaught TypeError: (0 , _reactRedux.provide) is not a function
    Evaluating http://10.211.55.5:9000/dist/app/viz/Viz.js
    Evaluating http://10.211.55.5:9000/dist/app/viz/route.js
    Error loading http://10.211.55.5:9000/dist/app/viz/route.js

I did notice it was removed in: reduxjs/react-redux@0949488 though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.