37 | {errorMessage} 38 | {' '} 39 | 42 |
43 | ) 44 | } 45 | 46 | render() { 47 | const { children, inputValue } = this.props 48 | return ( 49 |
50 |
53 | {this.renderErrorMessage()} 54 | {children} 55 |
56 | )
57 | }
58 | }
59 |
60 | const mapStateToProps = (state, ownProps) => ({
61 | errorMessage: state.errorMessage,
62 | inputValue: ownProps.location.pathname.substring(1)
63 | })
64 |
65 | export default connect(mapStateToProps, {
66 | resetErrorMessage
67 | })(App)
68 |
--------------------------------------------------------------------------------
/examples/real-world/src/app/actions.js:
--------------------------------------------------------------------------------
1 | export const RESET_ERROR_MESSAGE = 'RESET_ERROR_MESSAGE'
2 |
3 | export const resetErrorMessage = () => ({
4 | type: RESET_ERROR_MESSAGE
5 | })
6 |
--------------------------------------------------------------------------------
/examples/real-world/src/app/components/Explore.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 |
3 | import React, { Component } from 'react'
4 | import PropTypes from 'prop-types'
5 |
6 | export default class Explore extends Component {
7 | static propTypes = {
8 | value: PropTypes.string.isRequired,
9 | onChange: PropTypes.func.isRequired,
10 | githubRepo: PropTypes.string.isRequired
11 | }
12 |
13 | componentWillReceiveProps(nextProps) {
14 | if (nextProps.value !== this.props.value) {
15 | this.setInputValue(nextProps.value)
16 | }
17 | }
18 |
19 | getInputValue = () => {
20 | return this.input.value
21 | }
22 |
23 | setInputValue = (val) => {
24 | // Generally mutating DOM is a bad idea in React components,
25 | // but doing this for a single uncontrolled field is less fuss
26 | // than making it controlled and maintaining a state for it.
27 | this.input.value = val
28 | }
29 |
30 | handleKeyUp = (e) => {
31 | if (e.keyCode === 13) {
32 | this.handleGoClick()
33 | }
34 | }
35 |
36 | handleGoClick = () => {
37 | this.props.onChange(this.getInputValue())
38 | }
39 |
40 | render() {
41 | return (
42 | 53 | {this.renderErrorMessage()} 54 | {children} 55 |
43 |
58 | )
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/examples/real-world/src/app/containers/Explore.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import Explore from '../components/Explore'
3 |
4 | const mapStateToProps = (state) => ({
5 | githubRepo: state.configuration.GITHUB_REPO
6 | })
7 |
8 | export default connect(mapStateToProps)(Explore)
9 |
--------------------------------------------------------------------------------
/examples/real-world/src/app/index.js:
--------------------------------------------------------------------------------
1 | import { withReducer } from 'react-redux-dynamic-reducer'
2 |
3 | import App from './App'
4 | import reducer from './reducer'
5 |
6 | export default withReducer(reducer, 'app')(App)
7 |
--------------------------------------------------------------------------------
/examples/real-world/src/app/reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import { RESET_ERROR_MESSAGE } from './actions'
3 |
4 | const errorMessage = (state = null, action) => {
5 | const { type, error } = action
6 |
7 | if (type === RESET_ERROR_MESSAGE) {
8 | return null
9 | } else if (error) {
10 | return error
11 | }
12 |
13 | return state
14 | }
15 |
16 | export default combineReducers({
17 | errorMessage
18 | })
19 |
--------------------------------------------------------------------------------
/examples/real-world/src/common/components/List.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 |
3 | import React, { Component } from 'react'
4 | import PropTypes from 'prop-types'
5 |
6 | export default class List extends Component {
7 | static propTypes = {
8 | loadingLabel: PropTypes.string.isRequired,
9 | pageCount: PropTypes.number,
10 | renderItem: PropTypes.func.isRequired,
11 | items: PropTypes.array.isRequired,
12 | isFetching: PropTypes.bool.isRequired,
13 | onLoadMoreClick: PropTypes.func.isRequired,
14 | nextPageUrl: PropTypes.string
15 | }
16 |
17 | static defaultProps = {
18 | isFetching: true,
19 | loadingLabel: 'Loading...'
20 | }
21 |
22 | renderLoadMore() {
23 | const { isFetching, onLoadMoreClick } = this.props
24 | return (
25 |
30 | )
31 | }
32 |
33 | render() {
34 | const {
35 | isFetching, nextPageUrl, pageCount,
36 | items, renderItem, loadingLabel
37 | } = this.props
38 |
39 | const isEmpty = items.length === 0
40 | if (isEmpty && isFetching) {
41 | return Type a username or repo full name and hit 'Go':
44 | this.input = input} 46 | defaultValue={this.props.value} 47 | onKeyUp={this.handleKeyUp} /> 48 | 51 |52 | Code on Github. 53 |
54 |55 | Move the DevTools with Ctrl+W or hide them with Ctrl+H. 56 |
57 |{loadingLabel}
42 | } 43 | 44 | const isLastPage = !nextPageUrl 45 | if (isEmpty && isLastPage) { 46 | returnNothing here!
47 | } 48 | 49 | return ( 50 |
51 | {items.map(renderItem)}
52 | {pageCount > 0 && !isLastPage && this.renderLoadMore()}
53 |
54 | )
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/examples/real-world/src/common/components/Repo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Link } from 'react-router'
4 |
5 | const Repo = ({ repo, owner }) => {
6 | const { login } = owner
7 | const { name, description } = repo
8 |
9 | return (
10 |
11 |
24 | )
25 | }
26 |
27 | Repo.propTypes = {
28 | repo: PropTypes.shape({
29 | name: PropTypes.string.isRequired,
30 | description: PropTypes.string
31 | }).isRequired,
32 | owner: PropTypes.shape({
33 | login: PropTypes.string.isRequired
34 | }).isRequired
35 | }
36 |
37 | export default Repo
38 |
--------------------------------------------------------------------------------
/examples/real-world/src/common/components/User.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Link } from 'react-router'
4 |
5 | const User = ({ user }) => {
6 | const { login, avatarUrl, name } = user
7 |
8 | return (
9 | 12 | 13 | {name} 14 | 15 | {' by '} 16 | 17 | {login} 18 | 19 |
20 | {description && 21 |{description}
22 | } 23 |
10 |
11 | 
12 |
17 | )
18 | }
19 |
20 | User.propTypes = {
21 | user: PropTypes.shape({
22 | login: PropTypes.string.isRequired,
23 | avatarUrl: PropTypes.string.isRequired,
24 | name: PropTypes.string
25 | }).isRequired
26 | }
27 |
28 | export default User
29 |
--------------------------------------------------------------------------------
/examples/real-world/src/common/middleware/api.js:
--------------------------------------------------------------------------------
1 | import { normalize, schema } from 'normalizr'
2 | import { camelizeKeys } from 'humps'
3 |
4 | // Extracts the next page URL from Github API response.
5 | const getNextPageUrl = response => {
6 | const link = response.headers.get('link')
7 | if (!link) {
8 | return null
9 | }
10 |
11 | const nextLink = link.split(',').find(s => s.indexOf('rel="next"') > -1)
12 | if (!nextLink) {
13 | return null
14 | }
15 |
16 | return nextLink.split(';')[0].slice(1, -1)
17 | }
18 |
19 | // Fetches an API response and normalizes the result JSON according to schema.
20 | // This makes every API response have the same shape, regardless of how nested it was.
21 | const callApi = (apiRoot, endpoint, schema) => {
22 | const fullUrl = (endpoint.indexOf(apiRoot) === -1) ? apiRoot + endpoint : endpoint
23 |
24 | return fetch(fullUrl)
25 | .then(response =>
26 | response.json().then(json => {
27 | if (!response.ok) {
28 | return Promise.reject(json)
29 | }
30 |
31 | const camelizedJson = camelizeKeys(json)
32 | const nextPageUrl = getNextPageUrl(response)
33 |
34 | return Object.assign({},
35 | normalize(camelizedJson, schema),
36 | { nextPageUrl }
37 | )
38 | })
39 | )
40 | }
41 |
42 | // We use this Normalizr schemas to transform API responses from a nested form
43 | // to a flat form where repos and users are placed in `entities`, and nested
44 | // JSON objects are replaced with their IDs. This is very convenient for
45 | // consumption by reducers, because we can easily build a normalized tree
46 | // and keep it updated as we fetch more data.
47 |
48 | // Read more about Normalizr: https://github.com/paularmstrong/normalizr
49 |
50 | // GitHub's API may return results with uppercase letters while the query
51 | // doesn't contain any. For example, "someuser" could result in "SomeUser"
52 | // leading to a frozen UI as it wouldn't find "someuser" in the entities.
53 | // That's why we're forcing lower cases down there.
54 |
55 | const userSchema = new schema.Entity('users', {}, {
56 | idAttribute: user => user.login.toLowerCase()
57 | })
58 |
59 | const repoSchema = new schema.Entity('repos', {
60 | owner: userSchema
61 | }, {
62 | idAttribute: repo => repo.fullName.toLowerCase()
63 | })
64 |
65 | // Schemas for Github API responses.
66 | export const Schemas = {
67 | USER: userSchema,
68 | USER_ARRAY: [userSchema],
69 | REPO: repoSchema,
70 | REPO_ARRAY: [repoSchema]
71 | }
72 |
73 | // Action key that carries API call info interpreted by this Redux middleware.
74 | export const CALL_API = 'Call API'
75 |
76 | // A Redux middleware that interprets actions with CALL_API info specified.
77 | // Performs the call and promises when such actions are dispatched.
78 | export default store => next => action => {
79 | const callAPI = action[CALL_API]
80 | if (typeof callAPI === 'undefined') {
81 | return next(action)
82 | }
83 |
84 | let { endpoint } = callAPI
85 | const { schema, types } = callAPI
86 |
87 | if (typeof endpoint === 'function') {
88 | endpoint = endpoint(store.getState())
89 | }
90 |
91 | if (typeof endpoint !== 'string') {
92 | throw new Error('Specify a string endpoint URL.')
93 | }
94 | if (!schema) {
95 | throw new Error('Specify one of the exported Schemas.')
96 | }
97 | if (!Array.isArray(types) || types.length !== 3) {
98 | throw new Error('Expected an array of three action types.')
99 | }
100 | if (!types.every(type => typeof type === 'string')) {
101 | throw new Error('Expected action types to be strings.')
102 | }
103 |
104 | const actionWith = data => {
105 | const finalAction = Object.assign({}, action, data)
106 | delete finalAction[CALL_API]
107 | return finalAction
108 | }
109 |
110 | const [ requestType, successType, failureType ] = types
111 | next(actionWith({ type: requestType }))
112 |
113 | const apiRoot = store.getState().configuration.API_ROOT
114 |
115 | return callApi(apiRoot, endpoint, schema).then(
116 | response => next(actionWith({
117 | response,
118 | type: successType
119 | })),
120 | error => next(actionWith({
121 | type: failureType,
122 | error: error.message || 'Something bad happened'
123 | }))
124 | )
125 | }
126 |
--------------------------------------------------------------------------------
/examples/real-world/src/common/reducers/entities.js:
--------------------------------------------------------------------------------
1 | import merge from 'lodash/merge'
2 |
3 | const entities = (state = { users: {}, repos: {} }, action) => {
4 | if (action.response && action.response.entities) {
5 | return merge({}, state, action.response.entities)
6 | }
7 |
8 | return state
9 | }
10 |
11 | export default entities
12 |
--------------------------------------------------------------------------------
/examples/real-world/src/common/reducers/paginate.js:
--------------------------------------------------------------------------------
1 | import union from 'lodash/union'
2 |
3 | // Creates a reducer managing pagination, given the action types to handle,
4 | // and a function telling how to extract the key from an action.
5 | const paginate = ({ types, mapActionToKey }) => {
6 | if (!Array.isArray(types) || types.length !== 3) {
7 | throw new Error('Expected types to be an array of three elements.')
8 | }
9 | if (!types.every(t => typeof t === 'string')) {
10 | throw new Error('Expected types to be strings.')
11 | }
12 | if (typeof mapActionToKey !== 'function') {
13 | throw new Error('Expected mapActionToKey to be a function.')
14 | }
15 |
16 | const [ requestType, successType, failureType ] = types
17 |
18 | const updatePagination = (state = {
19 | isFetching: false,
20 | nextPageUrl: undefined,
21 | pageCount: 0,
22 | ids: []
23 | }, action) => {
24 | switch (action.type) {
25 | case requestType:
26 | return {
27 | ...state,
28 | isFetching: true
29 | }
30 | case successType:
31 | return {
32 | ...state,
33 | isFetching: false,
34 | ids: union(state.ids, action.response.result),
35 | nextPageUrl: action.response.nextPageUrl,
36 | pageCount: state.pageCount + 1
37 | }
38 | case failureType:
39 | return {
40 | ...state,
41 | isFetching: false
42 | }
43 | default:
44 | return state
45 | }
46 | }
47 |
48 | return (state = {}, action) => {
49 | // Update pagination by key
50 | switch (action.type) {
51 | case requestType:
52 | case successType:
53 | case failureType:
54 | const key = mapActionToKey(action)
55 | if (typeof key !== 'string') {
56 | throw new Error('Expected key to be a string.')
57 | }
58 | return {
59 | ...state,
60 | [key]: updatePagination(state[key], action)
61 | }
62 | default:
63 | return state
64 | }
65 | }
66 | }
67 |
68 | export default paginate
69 |
--------------------------------------------------------------------------------
/examples/real-world/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { browserHistory } from 'react-router'
4 | import { syncHistoryWithStore } from 'react-router-redux'
5 | import { Root, configureStore } from './root'
6 |
7 | const store = configureStore()
8 | const history = syncHistoryWithStore(browserHistory, store)
9 |
10 | render(
11 | 13 | {login} {name && ({name})} 14 |
15 | 16 |Loading {name} details...
51 | } 52 | 53 | const { stargazers, stargazersPagination } = this.props 54 | return ( 55 |
56 |
59 |
65 | )
66 | }
67 | }
68 |
69 | const mapStateToProps = (state, ownProps) => {
70 | // We need to lower case the login/name due to the way GitHub's API behaves.
71 | // Have a look at ../middleware/api.js for more details.
72 | const login = ownProps.params.login.toLowerCase()
73 | const name = ownProps.params.name.toLowerCase()
74 |
75 | const {
76 | stargazersByRepo,
77 | entities: { users, repos }
78 | } = state
79 |
80 | const fullName = `${login}/${name}`
81 | const stargazersPagination = stargazersByRepo[fullName] || { ids: [] }
82 | const stargazers = stargazersPagination.ids.map(id => users[id])
83 |
84 | return {
85 | fullName,
86 | name,
87 | stargazers,
88 | stargazersPagination,
89 | repo: repos[fullName],
90 | owner: users[login]
91 | }
92 | }
93 |
94 | export default connect(mapStateToProps, {
95 | loadRepo,
96 | loadStargazers
97 | })(RepoPage)
98 |
--------------------------------------------------------------------------------
/examples/real-world/src/repoPage/actions.js:
--------------------------------------------------------------------------------
1 | import { CALL_API, Schemas } from '../common/middleware/api'
2 |
3 | export const REPO_REQUEST = 'REPO_REQUEST'
4 | export const REPO_SUCCESS = 'REPO_SUCCESS'
5 | export const REPO_FAILURE = 'REPO_FAILURE'
6 |
7 | // Fetches a single repository from Github API.
8 | // Relies on the custom API middleware defined in ../middleware/api.js.
9 | const fetchRepo = fullName => ({
10 | [CALL_API]: {
11 | types: [ REPO_REQUEST, REPO_SUCCESS, REPO_FAILURE ],
12 | endpoint: `repos/${fullName}`,
13 | schema: Schemas.REPO
14 | }
15 | })
16 |
17 | // Fetches a single repository from Github API unless it is cached.
18 | // Relies on Redux Thunk middleware.
19 | export const loadRepo = (fullName, requiredFields = []) => (dispatch, getState) => {
20 | const repo = getState().entities.repos[fullName]
21 | if (repo && requiredFields.every(key => repo.hasOwnProperty(key))) {
22 | return null
23 | }
24 |
25 | return dispatch(fetchRepo(fullName))
26 | }
27 |
28 | export const STARGAZERS_REQUEST = 'STARGAZERS_REQUEST'
29 | export const STARGAZERS_SUCCESS = 'STARGAZERS_SUCCESS'
30 | export const STARGAZERS_FAILURE = 'STARGAZERS_FAILURE'
31 |
32 | // Fetches a page of stargazers for a particular repo.
33 | // Relies on the custom API middleware defined in ../middleware/api.js.
34 | const fetchStargazers = (fullName, nextPageUrl) => ({
35 | fullName,
36 | [CALL_API]: {
37 | types: [ STARGAZERS_REQUEST, STARGAZERS_SUCCESS, STARGAZERS_FAILURE ],
38 | endpoint: nextPageUrl,
39 | schema: Schemas.USER_ARRAY
40 | }
41 | })
42 |
43 | // Fetches a page of stargazers for a particular repo.
44 | // Bails out if page is cached and user didn't specifically request next page.
45 | // Relies on Redux Thunk middleware.
46 | export const loadStargazers = (fullName, nextPage) => (dispatch, getState) => {
47 | const {
48 | nextPageUrl = `repos/${fullName}/stargazers`,
49 | pageCount = 0
50 | } = getState().stargazersByRepo[fullName] || {}
51 |
52 | if (pageCount > 0 && !nextPage) {
53 | return null
54 | }
55 |
56 | return dispatch(fetchStargazers(fullName, nextPageUrl))
57 | }
58 |
--------------------------------------------------------------------------------
/examples/real-world/src/repoPage/index.js:
--------------------------------------------------------------------------------
1 | import { withReducer } from 'react-redux-dynamic-reducer'
2 |
3 | import RepoPage from './RepoPage'
4 | import reducer from './reducer'
5 |
6 | export default withReducer(reducer, 'repoPage')(RepoPage)
7 |
--------------------------------------------------------------------------------
/examples/real-world/src/repoPage/reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import * as ActionTypes from './actions'
3 | import entities from '../common/reducers/entities'
4 | import paginate from '../common/reducers/paginate'
5 |
6 | export default combineReducers({
7 | entities,
8 | stargazersByRepo: paginate({
9 | mapActionToKey: action => action.fullName,
10 | types: [
11 | ActionTypes.STARGAZERS_REQUEST,
12 | ActionTypes.STARGAZERS_SUCCESS,
13 | ActionTypes.STARGAZERS_FAILURE
14 | ]
15 | })
16 | })
17 |
--------------------------------------------------------------------------------
/examples/real-world/src/root/Root.dev.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Provider } from 'react-redux'
4 | import routes from './routes'
5 | import DevTools from './containers/DevTools'
6 | import { Router } from 'react-router'
7 |
8 | const Root = ({ store, history }) => (
9 | 59 |
11 |
14 | Loading...
6 | 7 | const loadRoute = (getPromise) => { 8 | const RouteComponent = Loadable({ 9 | loader: () => getPromise(), 10 | loading: Loading, 11 | render(loaded, props) { 12 | const Component = loaded.default; 13 | returnLoading {login}{"'s profile..."}
55 | } 56 | 57 | const { starredRepos, starredRepoOwners, starredPagination } = this.props 58 | return ( 59 |
60 |
62 |
68 | )
69 | }
70 | }
71 |
72 | const mapStateToProps = (state, ownProps) => {
73 | // We need to lower case the login due to the way GitHub's API behaves.
74 | // Have a look at ../middleware/api.js for more details.
75 | const login = ownProps.params.login.toLowerCase()
76 |
77 | const {
78 | starredByUser,
79 | entities: { users, repos }
80 | } = state
81 |
82 | const starredPagination = starredByUser[login] || { ids: [] }
83 | const starredRepos = starredPagination.ids.map(id => repos[id])
84 | const starredRepoOwners = starredRepos.map(repo => users[repo.owner])
85 |
86 | return {
87 | login,
88 | starredRepos,
89 | starredRepoOwners,
90 | starredPagination,
91 | user: users[login]
92 | }
93 | }
94 |
95 | export default connect(mapStateToProps, {
96 | loadUser,
97 | loadStarred
98 | })(UserPage)
99 |
--------------------------------------------------------------------------------
/examples/real-world/src/userPage/actions.js:
--------------------------------------------------------------------------------
1 | import { CALL_API, Schemas } from '../common/middleware/api'
2 |
3 | export const USER_REQUEST = 'USER_REQUEST'
4 | export const USER_SUCCESS = 'USER_SUCCESS'
5 | export const USER_FAILURE = 'USER_FAILURE'
6 |
7 | // Fetches a single user from Github API.
8 | // Relies on the custom API middleware defined in ../middleware/api.js.
9 | const fetchUser = login => ({
10 | [CALL_API]: {
11 | types: [ USER_REQUEST, USER_SUCCESS, USER_FAILURE ],
12 | endpoint: `users/${login}`,
13 | schema: Schemas.USER
14 | }
15 | })
16 |
17 | // Fetches a single user from Github API unless it is cached.
18 | // Relies on Redux Thunk middleware.
19 | export const loadUser = (login, requiredFields = []) => (dispatch, getState) => {
20 | const user = getState().entities.users[login]
21 | if (user && requiredFields.every(key => user.hasOwnProperty(key))) {
22 | return null
23 | }
24 |
25 | return dispatch(fetchUser(login))
26 | }
27 |
28 | export const STARRED_REQUEST = 'STARRED_REQUEST'
29 | export const STARRED_SUCCESS = 'STARRED_SUCCESS'
30 | export const STARRED_FAILURE = 'STARRED_FAILURE'
31 |
32 | // Fetches a page of starred repos by a particular user.
33 | // Relies on the custom API middleware defined in ../middleware/api.js.
34 | const fetchStarred = (login, nextPageUrl) => ({
35 | login,
36 | [CALL_API]: {
37 | types: [ STARRED_REQUEST, STARRED_SUCCESS, STARRED_FAILURE ],
38 | endpoint: nextPageUrl,
39 | schema: Schemas.REPO_ARRAY
40 | }
41 | })
42 |
43 | // Fetches a page of starred repos by a particular user.
44 | // Bails out if page is cached and user didn't specifically request next page.
45 | // Relies on Redux Thunk middleware.
46 | export const loadStarred = (login, nextPage) => (dispatch, getState) => {
47 | const {
48 | nextPageUrl = `users/${login}/starred`,
49 | pageCount = 0
50 | } = getState().starredByUser[login] || {}
51 |
52 | if (pageCount > 0 && !nextPage) {
53 | return null
54 | }
55 |
56 | return dispatch(fetchStarred(login, nextPageUrl))
57 | }
58 |
--------------------------------------------------------------------------------
/examples/real-world/src/userPage/index.js:
--------------------------------------------------------------------------------
1 | import { withReducer } from 'react-redux-dynamic-reducer'
2 |
3 | import UserPage from './UserPage'
4 | import reducer from './reducer'
5 |
6 | export default withReducer(reducer, 'userPage')(UserPage)
7 |
--------------------------------------------------------------------------------
/examples/real-world/src/userPage/reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import * as ActionTypes from './actions'
3 | import entities from '../common/reducers/entities'
4 | import paginate from '../common/reducers/paginate'
5 |
6 | export default combineReducers({
7 | entities,
8 | starredByUser: paginate({
9 | mapActionToKey: action => action.login,
10 | types: [
11 | ActionTypes.STARRED_REQUEST,
12 | ActionTypes.STARRED_SUCCESS,
13 | ActionTypes.STARRED_FAILURE
14 | ]
15 | })
16 | })
17 |
--------------------------------------------------------------------------------
/examples/todos/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # production
7 | build
8 |
9 | # misc
10 | .DS_Store
11 | npm-debug.log
12 |
--------------------------------------------------------------------------------
/examples/todos/README.md:
--------------------------------------------------------------------------------
1 | # Todos Example
2 |
3 | This example extends [Redux's todos example](https://github.com/reactjs/redux/tree/master/examples/todos) to bundle the Todo's component and reducer together and automatically attach the state when mounter.
4 |
5 | To run the example locally:
6 |
7 | ```sh
8 | git clone https://github.com/ioof-holdings/redux-dynamic-reducer.git
9 |
10 | cd redux-dynamic-reducer/examples/todos
11 | npm install
12 | npm start
13 | ```
14 |
15 | Or check out the [sandbox](https://codesandbox.io/s/github/ioof-holdings/redux-dynamic-reducer/tree/master/examples/todos).
16 |
--------------------------------------------------------------------------------
/examples/todos/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "todos",
3 | "version": "2.0.2",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "^1.0.17"
7 | },
8 | "dependencies": {
9 | "prop-types": "^15.6.0",
10 | "react": "^16.0.0",
11 | "react-dom": "^16.0.0",
12 | "react-redux": "^5.0.6",
13 | "react-redux-dynamic-reducer": "^2.0.2",
14 | "redux": "^3.7.2",
15 | "redux-dynamic-reducer": "^2.0.2"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "eject": "react-scripts eject",
21 | "test": "echo 'No Tests'"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/todos/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 62 |
10 |
14 | )
15 |
16 | export default withReducer(reducer, 'app')(App)
17 |
--------------------------------------------------------------------------------
/examples/todos/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FilterLink from '../containers/FilterLink'
3 |
4 | const Footer = () => (
5 |
6 | Show:
7 | {" "}
8 |
-
7 | {todos.map(todo =>
8 |
10 |
25 |
26 | )
27 | }
28 | AddTodo = connect()(AddTodo)
29 |
30 | export default AddTodo
31 |
--------------------------------------------------------------------------------
/examples/todos/src/containers/FilterLink.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { setVisibilityFilter } from '../actions'
3 | import Link from '../components/Link'
4 |
5 | const mapStateToProps = (state, ownProps) => ({
6 | active: ownProps.filter === state.visibilityFilter
7 | })
8 |
9 | const mapDispatchToProps = (dispatch, ownProps) => ({
10 | onClick: () => {
11 | dispatch(setVisibilityFilter(ownProps.filter))
12 | }
13 | })
14 |
15 | const FilterLink = connect(
16 | mapStateToProps,
17 | mapDispatchToProps
18 | )(Link)
19 |
20 | export default FilterLink
21 |
--------------------------------------------------------------------------------
/examples/todos/src/containers/VisibleTodoList.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { toggleTodo } from '../actions'
3 | import TodoList from '../components/TodoList'
4 |
5 | const getVisibleTodos = (todos, filter) => {
6 | switch (filter) {
7 | case 'SHOW_ALL':
8 | return todos
9 | case 'SHOW_COMPLETED':
10 | return todos.filter(t => t.completed)
11 | case 'SHOW_ACTIVE':
12 | return todos.filter(t => !t.completed)
13 | default:
14 | throw new Error('Unknown filter: ' + filter)
15 | }
16 | }
17 |
18 | const mapStateToProps = (state) => ({
19 | todos: getVisibleTodos(state.todos, state.visibilityFilter)
20 | })
21 |
22 | const mapDispatchToProps = {
23 | onTodoClick: toggleTodo
24 | }
25 |
26 | const VisibleTodoList = connect(
27 | mapStateToProps,
28 | mapDispatchToProps
29 | )(TodoList)
30 |
31 | export default VisibleTodoList
32 |
--------------------------------------------------------------------------------
/examples/todos/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { createStore } from 'redux-dynamic-reducer'
4 | import { Provider } from 'react-redux'
5 |
6 | const store = createStore()
7 |
8 | import('./components/App').then(module => module.default)
9 | .then(App => render(
10 |
49 |
64 | )
65 |
--------------------------------------------------------------------------------
/packages/react-redux-dynamic-reducer/test/withReducer-spec.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017, IOOF Holdings Limited.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree.
7 | */
8 |
9 | import React from 'react'
10 | import { Provider, connect } from 'react-redux'
11 | import configureStore from 'redux-mock-store'
12 | import { render } from 'enzyme'
13 | import withReducer from '../src/withReducer'
14 |
15 | describe('withReducer Tests', () => {
16 |
17 | const reducer = (state = 'reducer state') => state
18 |
19 | describe('component defaults', () => {
20 | it('should wrap standard component', () => {
21 | class TestComponent extends React.Component {
22 | render() {
23 | return (
24 | {this.props.value}
25 | ) 26 | } 27 | } 28 | 29 | const mockStore = configureStore()({}) 30 | mockStore.attachReducers = sinon.spy() 31 | 32 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent) 33 | 34 | let testComponent = render( 35 |{value}
45 | 46 | const mockStore = configureStore()({}) 47 | mockStore.attachReducers = sinon.spy() 48 | 49 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent) 50 | 51 | let testComponent = render( 52 |{value}
62 | const ConnectedComponent = connect(state => ({value: state.value}))(TestComponent) 63 | 64 | const mockStore = configureStore()({ default: { value: "expected" }}) 65 | mockStore.attachReducers = sinon.spy() 66 | 67 | let DecoratedComponent = withReducer(reducer, 'default')(ConnectedComponent) 68 | 69 | let testComponent = render( 70 |{value}
80 | 81 | const reducerWithAction = (state = {}, action) => { 82 | switch(action.type) { 83 | case "TEST": 84 | return action.payload 85 | default: 86 | return state 87 | } 88 | } 89 | 90 | const mockStore = configureStore()({}) 91 | mockStore.attachReducers = sinon.spy() 92 | 93 | let DecoratedComponent = withReducer(reducerWithAction, 'default')(TestComponent) 94 | 95 | render( 96 |{value}
106 | 107 | const reducerWithAction = (state = {}, action) => { 108 | switch(action.type) { 109 | case "TEST": 110 | return action.payload 111 | default: 112 | return state 113 | } 114 | } 115 | 116 | const mockStore = configureStore()({}) 117 | mockStore.attachReducers = sinon.spy() 118 | 119 | let DecoratedComponent = withReducer(reducerWithAction, 'default', { namespace: true })(TestComponent) 120 | 121 | render( 122 |{value}
132 | 133 | const reducerWithAction = (state = {}, action) => { 134 | switch(action.type) { 135 | case "TEST": 136 | return action.payload 137 | default: 138 | return state 139 | } 140 | } 141 | 142 | const mockStore = configureStore()({}) 143 | mockStore.attachReducers = sinon.spy() 144 | 145 | let DecoratedComponent = withReducer(reducerWithAction, 'default', { namespaceActions: false })(TestComponent) 146 | 147 | render( 148 |{value} - {otherValue}
158 | const ConnectedComponent = connect(state => ({ value: state.value, otherValue: state.otherValue }))(TestComponent) 159 | 160 | const mockStore = configureStore()({ default: { value: "expected" }, otherValue: "other"}) 161 | mockStore.attachReducers = sinon.spy() 162 | 163 | let DecoratedComponent = withReducer(reducer, 'default')(ConnectedComponent) 164 | .withExtraState((state, rootState) => ({ otherValue: rootState.otherValue })) 165 | 166 | let testComponent = render( 167 |{value} - {otherValue}
177 | const ConnectedComponent = connect(state => ({ value: state.value, otherValue: state.otherValue }))(TestComponent) 178 | 179 | const mockStore = configureStore()({ default: { value: "expected" }, otherValue: "other" }) 180 | mockStore.attachReducers = sinon.spy() 181 | 182 | let DecoratedComponent = withReducer(reducer, 'default', { mapExtraState: (state, rootState) => ({ otherValue: rootState.otherValue }) })(ConnectedComponent) 183 | 184 | let testComponent = render( 185 |{value}
195 | 196 | const mockStore = configureStore()() 197 | mockStore.attachReducers = sinon.spy() 198 | 199 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent).withOptions({}) 200 | 201 | let testComponent = render( 202 |{value}
)) 218 | let DecoratedComponent2 = withReducer(reducer, 'default1')(() =>{value}
233 | 234 | const mockStore = configureStore()({}) 235 | 236 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent) 237 | 238 | expect(() => render( 239 |{value}
252 | 253 | const mockStore = configureStore()({}) 254 | 255 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent) 256 | 257 | let testComponent = render( 258 |{this.props.value}
276 | ) 277 | } 278 | } 279 | 280 | const mockStore = configureStore()({}) 281 | mockStore.attachReducers = sinon.spy() 282 | 283 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent).createInstance('instance') 284 | 285 | let testComponent = render( 286 |{value}
296 | 297 | const mockStore = configureStore()({}) 298 | mockStore.attachReducers = sinon.spy() 299 | 300 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent).createInstance('instance') 301 | 302 | let testComponent = render( 303 |{value}
313 | const ConnectedComponent = connect(state => ({value: state.value}))(TestComponent) 314 | 315 | const mockStore = configureStore()({ instance: { value: "expected" }}) 316 | mockStore.attachReducers = sinon.spy() 317 | 318 | let DecoratedComponent = withReducer(reducer, 'default')(ConnectedComponent).createInstance('instance') 319 | 320 | let testComponent = render( 321 |{value}
331 | 332 | const reducerWithAction = (state = {}, action) => { 333 | switch(action.type) { 334 | case "TEST": 335 | return action.payload 336 | default: 337 | return state 338 | } 339 | } 340 | 341 | const mockStore = configureStore()({}) 342 | mockStore.attachReducers = sinon.spy() 343 | 344 | let DecoratedComponent = withReducer(reducerWithAction, 'default')(TestComponent).createInstance('instance') 345 | 346 | render( 347 |{value}
357 | 358 | const reducerWithAction = (state = {}, action) => { 359 | switch(action.type) { 360 | case "TEST": 361 | return action.payload 362 | default: 363 | return state 364 | } 365 | } 366 | 367 | const mockStore = configureStore()({}) 368 | mockStore.attachReducers = sinon.spy() 369 | 370 | let DecoratedComponent = withReducer(reducerWithAction, 'default', { namespace: true })(TestComponent).createInstance('instance') 371 | 372 | render( 373 |{value}
383 | 384 | const reducerWithAction = (state = {}, action) => { 385 | switch(action.type) { 386 | case "TEST": 387 | return action.payload 388 | default: 389 | return state 390 | } 391 | } 392 | 393 | const mockStore = configureStore()({}) 394 | mockStore.attachReducers = sinon.spy() 395 | 396 | let DecoratedComponent = withReducer(reducerWithAction, 'default', { namespaceActions: false })(TestComponent).createInstance('instance') 397 | 398 | render( 399 |{value} - {otherValue}
409 | const ConnectedComponent = connect(state => ({ value: state.value, otherValue: state.otherValue }))(TestComponent) 410 | 411 | const mockStore = configureStore()({ instance: { value: "expected" }, otherValue: "other" }) 412 | mockStore.attachReducers = sinon.spy() 413 | 414 | let DecoratedComponent = withReducer(reducer, 'default')(ConnectedComponent) 415 | .createInstance('instance') 416 | .withExtraState((state, rootState) => ({ otherValue: rootState.otherValue })) 417 | 418 | let testComponent = render( 419 |{value} - {otherValue}
429 | const ConnectedComponent = connect(state => ({ value: state.value, otherValue: state.otherValue }))(TestComponent) 430 | 431 | const mockStore = configureStore()({ instance: { value: "expected" }, otherValue: "other" }) 432 | mockStore.attachReducers = sinon.spy() 433 | 434 | let DecoratedComponent = withReducer(reducer, 'default', { mapExtraState: (state, rootState) => ({ otherValue: rootState.otherValue }) })(ConnectedComponent) 435 | .createInstance('instance') 436 | 437 | let testComponent = render( 438 |{value}
448 | 449 | const mockStore = configureStore()() 450 | mockStore.attachReducers = sinon.spy() 451 | 452 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent) 453 | .createInstance('instance') 454 | .withOptions({}) 455 | 456 | let testComponent = render( 457 |{value}
)).createInstance('instance2') 473 | let DecoratedComponent2 = withReducer(reducer, 'default1')(() =>{value}
488 | 489 | const mockStore = configureStore()({}) 490 | 491 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent).createInstance('instance') 492 | 493 | expect(() => render( 494 |{value}
507 | 508 | const mockStore = configureStore()({}) 509 | 510 | let DecoratedComponent = withReducer(reducer, 'default')(TestComponent).createInstance('instance') 511 | 512 | let testComponent = render( 513 |