文件列表:

.editorconfig (207, 2017-05-11)
.eslintignore (30, 2017-05-11)
.eslintrc (26, 2017-05-11)
better-observable-solution (0, 2017-05-11)
better-observable-solution\.babelrc (112, 2017-05-11)
better-observable-solution\actions (0, 2017-05-11)
better-observable-solution\actions\index.js (788, 2017-05-11)
better-observable-solution\api (0, 2017-05-11)
better-observable-solution\api\friends.js (795, 2017-05-11)
better-observable-solution\api\index.js (600, 2017-05-11)
better-observable-solution\components (0, 2017-05-11)
better-observable-solution\components\FriendList.js (786, 2017-05-11)
better-observable-solution\components\FriendThumbnail.js (377, 2017-05-11)
better-observable-solution\components\SearchInput.js (725, 2017-05-11)
better-observable-solution\constants (0, 2017-05-11)
better-observable-solution\constants\actionTypes.js (138, 2017-05-11)
better-observable-solution\containers (0, 2017-05-11)
better-observable-solution\containers\FriendSearchView.js (1121, 2017-05-11)
better-observable-solution\index.html (1502, 2017-05-11)
better-observable-solution\index.js (1034, 2017-05-11)
better-observable-solution\package.json (881, 2017-05-11)
better-observable-solution\reducers (0, 2017-05-11)
better-observable-solution\reducers\index.js (625, 2017-05-11)
better-observable-solution\server.js (722, 2017-05-11)
better-observable-solution\store (0, 2017-05-11)
better-observable-solution\store\configureStore.js (544, 2017-05-11)
better-observable-solution\webpack.config.js (627, 2017-05-11)
cyclejs-snabbdom-solution (0, 2017-05-11)
cyclejs-snabbdom-solution\.babelrc (28, 2017-05-11)
cyclejs-snabbdom-solution\.eslintrc (155, 2017-05-11)
cyclejs-snabbdom-solution\index.html (1518, 2017-05-11)
cyclejs-snabbdom-solution\loader.css (944, 2017-05-11)
cyclejs-snabbdom-solution\package.json (1035, 2017-05-11)
cyclejs-snabbdom-solution\src (0, 2017-05-11)
cyclejs-snabbdom-solution\src\api (0, 2017-05-11)
... ...

# Friend List A non-trivial (yet simple) front-end programming challenge. Featuring solutions in [React](https://facebook.github.io/react/), [Redux](http://redux.js.org), [Redux-Saga](https://github.com/yelouafi/redux-saga), [Cycle.js](http://cycle.js.org), [Motorcycle.js](https://github.com/motorcyclejs/core) and [Snabbdom](https://github.com/paldepind/snabbdom). Check out the Elm solution [here](https://github.com/DerekCuevas/friend-list-elm)!  ## The Problem Create an app with a dynamic and search-able list of data that keeps a search input text query in sync with the URL via a query parameter at all times. Assume the data will be fetched from some API and the API will perform the actual search. The query should be a simple string and kept in sync with the URL via a query parameter 'q' (ex. localhost:3000/?q=batman). This problem is harder than it first appears, actions must be managed in the correct order, and if not can result in infinite loops and other undesirable behavior. ## The Spec - Hit the API **once and only once** per query change. - When the query updates -> update the URL and fetch results from the API. - When the URL updates -> update the query and fetch results from the API. - The browser's back / forward buttons should keep the app state (query + results) in sync with the URL (this is a gotcha if not thought about carefully). #### Bonus Features - Handle the concurrent actions issue (see the [redux-saga-solution](redux-saga-solution/), the [cyclejs-solution](cyclejs-solution/), the [motorcyclejs-solution](motorcyclejs-solution/), and the [better-observable-solution](better-observable-solution/)) - "If the user changes the query input while there is still a pending request from a previous query change, the current pending request should be cancelled and a new request should be made." - Thanks [@yelouafi](https://github.com/yelouafi) - Debounce the fetching of results by 100ms. - Log any state changing action with the newly changed state. - Add loading and/or error states (see the redux-meta-reducer [friend-list](https://github.com/DerekCuevas/redux-meta-reducer/tree/master/examples/friend-list) example). ## Solutions Solutions are in their own subdirectories above. Check out the README files in each of the subdirectories for example specific details. Many have similar structures (identical store state + hitting the same mock API). The difference being when and where the apps read router state and when and where the apps dispatch actions. #### To run First clone the repo. ```sh git clone https://github.com/DerekCuevas/friend-list.git ``` Then cd into an example, 'npm install' and 'npm start' to get going. ```sh cd friend-list/imperative-solution/ # or the others npm install npm start ``` ## Contributors - [redux-saga-solution](redux-saga-solution/) - [@yelouafi](https://github.com/yelouafi) - [cyclejs-solution](cyclejs-solution/) - [@justinwoo](https://github.com/justinwoo) - [motorcyclejs-solution](motorcyclejs-solution/), [cyclejs-snabbdom-solution](cyclejs-snabbdom-solution/) - [@TylorS](https://github.com/TylorS) #### Have a better implementation? Please make an issue or send in a pull request.

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：