Skip to content

Instantly share code, notes, and snippets.

@nihtalak

nihtalak/fiddle.babel + jsx

Forked from anonymous/fiddle.babel + jsx
Created March 20, 2018 00:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nihtalak/357dd3426074523ae1810c0978511e45 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nihtalak/357dd3426074523ae1810c0978511e45 to your computer and use it in GitHub Desktop.
Download ZIP
Basic React-Redux App (source: https://jsfiddle.net/o99joxg2/48/)
Raw
fiddle.babel + jsx
const { Component } = React
const { Provider, connect } = ReactRedux
const { combineReducers } = Redux
const serverResponse = (size = 10) =>
Array.from({length: size}, () => Math.floor(Math.random() * size));
let mapStateToProps
//============================================================
// store/modules/products.js
const initialState = []
const products = (state = initialState, action) => {
switch(action.type) {
case 'LOAD_SUCCESS':
return action.payload
default:
return state
}
}
const loadProducts = (filters) => {
console.log('making server request...')
console.log(`/url?sort=${filters.sort}&search=${filters.filter}`)
return { type: 'LOAD_SUCCESS', payload: serverResponse(5) }
}
//============================================================
// store/modules/ui/sort.js
const sort = (state = 'asс', action) => {
switch (action.type) {
case 'TOGGLE_SORT':
return state == 'asc' ? 'desc' : 'asc'
default:
return state
}
}
const toggleSort = () => {
return { type: 'TOGGLE_SORT' }
}
//============================================================
// store/modules/ui/filter.js
const filter = (state = '', action) => {
switch (action.type) {
case 'SET_FILTER':
return action.payload
default:
return state
}
}
const changeFilter = (value) => {
return { type: 'SET_FILTER', payload: value }
}
//============================================================
// containers/Filter.js
const IFilter = ({ value, onChange }) => (
<input value={value} onChange={(e) => onChange(e.target.value)} />
)
mapStateToProps = (state) => {
return { value: state.ui.filter }
}
const Filter = connect(mapStateToProps, {
onChange: changeFilter
})(IFilter)
// containers/Sort.js
const ISort = ({ title, onClick }) => (
<button onClick={onClick}>{title}</button>
)
mapStateToProps = (state) => {
return { title: state.ui.sort }
}
const Sort = connect(mapStateToProps, {
onClick: toggleSort
})(ISort)
// containers/Products.js
const IProductsTable = ({ products }) => (
<table>
<tbody>
{products.map((row, i) => (
<tr key={i}>
<td>{row}</td>
</tr>
))}
</tbody>
</table>
)
mapStateToProps = (state) => {
return { products: state.products }
}
const ProductsTable = connect(mapStateToProps)(IProductsTable)
// App.js
class App extends React.Component {
componentDidMount () {
const { filters, loadProducts } = this.props
loadProducts(filters)
}
componentWillReceiveProps (props) {
if (this.props.filters != props.filters) {
this.props.loadProducts(props.filters)
}
}
render () {
return (
<div>
<ProductsTable />
<Filter />
<Sort />
</div>
)
}
}
mapStateToProps = (state) => {
return { filters: state.ui }
}
App = connect(mapStateToProps, { loadProducts })(App)
const reducer = combineReducers({
products: products,
ui: combineReducers({
sort: sort,
filter: filter
})
})
const store = Redux.createStore(reducer)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('container')
)
Raw
fiddle.html
<div id="container" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment