73 Matching Annotations
  1. Oct 2020
    1. A first step would be to dispatch actions and update state via a reducer, something along the lines of useReducer in React.
  2. Jul 2020
    1. Sure you can hook up different reducers to manage different parts of your application, but the indirection of going through all these action creators and reducers is not optimal.

      On indirection through multiple action creators and reducers for managing different parts of an application

    2. consistently see developers putting all of their state into redux. Not just global application state, but local state as well. This leads to a lot of problems

      global vs local state management. Solutions are not one size fits all.

    3. One of the reasons redux was so successful was the fact that react-redux solved the prop drilling problem. The fact that you could share data across different parts of your tree by simply passing your component into some magical connect function was wonderful.

      Reasons why redux was so successful

  3. May 2020
  4. redux.js.org redux.js.org
    1. functional programming utility, and is included in Redux as a convenience. You might want to use it to apply several store enhancers in a row.

      store enhancers for redux; All compose does is let you write deeply nested function transformations without the rightward drift of the code. Don't give it too much credit!

  5. Apr 2020
    1. SPAs are incredibly common, popularised by client-side web frameworks like Angular, React and Vue.js.


      • popularised by client-side web frameworks like Angular, React and Vue.js
      • real difference between the MVP app is shifting most of its work on the client side
      • there's client side MVC, MVVM (model-view-view-model) and FRP (functional reactive programming)

      Angular - client side MVC framework following its pattern, except it's running inside the users web browser.

      React - implementation of FRP. A little more flexible, but more concerned with state change events in data (often using some event store like Redux)

    1. In addition to these development tool middleware, it also adds redux-thunk by default, since thunks are the basic recommended side effects middleware for Redux.

      redux-thunk 默认加入

    1. I'm a Redux maintainer and creator of Redux Toolkit. FWIW, nothing about making async calls with Redux changes with Redux Toolkit. You'd still use an async middleware (typically redux-thunk), fetch data, and dispatch actions with the results.

      Redux Toolkit作者说了,RTK并没有改变任何异步操作的调用。还是可以使用中间件(象redux-thunk)获取数据和分发结果动作。

  6. redux.js.org redux.js.org
    1. reducer: any function with the signature (state, action) -> newState (ie, any function that could be used as an argument to Array.prototype.reduce)root reducer: the reducer function that is actually passed as the first argument to createStore. This is the only part of the reducer logic that must have the (state, action) -> newState signature.slice reducer: a reducer that is being used to handle updates to one specific slice of the state tree, usually done by passing it to combineReducerscase function: a function that is being used to handle the update logic for a specific action. This may actually be a reducer function, or it may require other parameters to do its work properly.higher-order reducer: a function that takes a reducer function as an argument, and/or returns a new reducer function as a result (such as combineReducers, or redux-undo)


    2. irst and foremost, combineReducers is simply a utility function to simplify the most common use case when writing Redux reducers.


    3. functions should be relatively short and ideally only do one specific thing


    1. 应用风格指南,值得参考的部分

    2. Redux itself does not care about how your application's folders and files are structured. However, co-locating logic for a given feature in one place typically makes it easier to maintain that code.Because of this, we recommend that most applications should structure files using a "feature folder" approach (all files for a feature in the same folder) or the "ducks" pattern (all Redux logic for a feature in a single file), rather than splitting logic across separate folders by "type" of code (reducers, actions, etc).


    1. When a React component dispatches actions, how can another service catch the actions, accumulate and group them, then redispatch a single action?

      Catching actions to accumulate and group them

  7. Mar 2020
    1. you can make the component a container component by wrapping it in a higher-order component returned by connect().


    2. react-redux包很简单,暴露了两个东西:Provider和connnect

    1. wrapping your entire application in a <Provider> component


    2. React Redux now offers a set of hook APIs as an alternative to the existing connect() Higher Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect()

      React Redux提供的一些hook api可以用来替代connect高阶组件。用来订阅Redux Store和分发动作,而无需connect()

    1. Notice that none of these changed anything about how Redux works. We're still creating a Redux store, dispatching action objects that describe "what happened", and returning updated state using a reducer function. Also, notice that the Redux Toolkit functions can be used no matter what approach was used to build the UI, since they just handle the "plain Redux store" part of the code. Our example used the store with a "vanilla JS" UI, but we could use this same store with React, Angular, Vue, or any other UI layer.

      Redux Toolkit并没有侵入Redux。可以用在React,Angular,Vue和其它UI层。所以,我想,应该也可以用在Taro上面!

    1. And no longer requires you to install the redux-thunk or redux-devtools-extension dependencies.


    1. The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:"Configuring a Redux store is too complicated""I have to add a lot of packages to get Redux to do anything useful""Redux requires too much boilerplate code"

      Redux Toolkit的用意是以标准方式编写Redux逻辑,帮助解决下面三个问题:

      • 配置store太复杂
      • 需要添加太多的包
      • 需要很多模板代码
    1. To do that, the react-redux library comes with 2 things: a component called Provider, and a function called connect.

      react-redux带来两样东西: 一个叫Provider的组件 一个叫connect的函数

    2. Reducer Rule #2: Reducers must be pure functions.


    1. automatically handle all other action types by returning the current state


    2. in most apps, you won't need to use them yourself - createSlice is all you need.


    1. The whole state of your app is stored in an object tree inside a single store. The only way to change the state tree is to emit an action, an object describing what happened. To specify how the actions transform the state tree, you write pure reducers.


  8. Feb 2020
  9. Jan 2020
    1. Instead of allowing any and all components to fetch and manipulate data, which can make debugging pretty much suck, we want to implement a pattern that's in line with the Single Responsibility Principle, and that keeps our code DRY.
  10. Nov 2019
    1. The most common signature for HOCs looks like this: // React Redux's `connect` const ConnectedComment = connect(commentSelector, commentActions)(CommentList); What?! If you break it apart, it’s easier to see what’s going on. // connect is a function that returns another function const enhance = connect(commentListSelector, commentListActions); // The returned function is a HOC, which returns a component that is connected // to the Redux store const ConnectedComment = enhance(CommentList); In other words, connect is a higher-order function that returns a higher-order component!

      probably a common and useful example that is used with Redux

  11. Aug 2019
    1. I was so fed up of the mega amounts of boilerplate with Redux and the recommendation of keeping your data loading at view level. It seems to me that things like this, with components being responsible for their own data, is the way to go in the future.
  12. Apr 2019
  13. Jan 2019
    1. 这样可以方便的进行单元测试,不需要模拟Api.fetch函数的具体返回结果。

      非模拟时,由redux-saga内部的调度器帮我们执行 next(在异步函数或副作用函数执行获得结果后);

      模拟时,由测试函数自己根据需要执行 next,所以说无需模拟 Api.fetch 函数的具体返回结果,从而为测试带来了方便

  14. Nov 2018
  15. Oct 2018
  16. Sep 2018
  17. Jul 2018
    1. const shopItemsSelector = state => state.shop.items const taxPercentSelector = state => state.shop.taxPercent

      This is a selector

    2. const subtotalSelector = createSelector( shopItemsSelector, items => items.reduce((acc, item) => acc + item.value, 0) )

      This is a memoized selector. items.reduce will be evaluated during the first call. Any subsequent call with the same parameters will return the result without computing items.reduce.

  18. Apr 2017
  19. Feb 2017
  20. Apr 2016
    1. I’ve personally seen two big benefits after adopting this strict separation in production apps. The first is that teams can more easily reuse the Presentation Components because they are nothing more than html/css. Over time this will allow the team to amass a great component library that is more composable allowing even greater code sharing across the organization. The second benefit is that teams can more easily upgrade the infrastructure that powers data flow throughout the application. Because this code is isolated in the Container Components we don’t need to untangle the plumbing code from the html/css that displays it. So you want to swap your global store for an ember service? No problem! We just modify the entry point in the Container Components and the data still flows down to any Presentational Components like it did before the refactor.
  21. Mar 2016
    1. Therefore we've built https://github.com/salsita/redux-side-effects which is at least "somehow" trying to simulate the Continuations with Effect handlers approach. The idea is very simple, if reducer was generator then you could simply yield side effects and return mutated app state. So the only condition is to turn all your reducers into function* and use yield* whenever you want to compose them.

      This also looks like an interesting and potentially relatively simple take on supporting effects in reducers.

    2. Very interesting thread with a discussion on how to improve handling of effects in Redux and make Redux applications composable ala. the Elm Architecture.

      Redux Loop looks like a very interesting take on supporting the Elm arch with the current version of Redux

    1. This is a useful introduction through recent developments in client-side data management and an overview of the different choices available when building a new application and guidance on what is appropriate for different sizes of app.

  22. Feb 2016
  23. Jan 2016
    1. All kinds of frameworks and architectures have state. In Ember apps and Backbone apps, state is in Models. In Angular apps, state is often in Factories and Services. In most Flux implementations, it is in Stores. How does Redux differ from these?

      Useful explanation of how state storage in Redux differs from other frameworks.

    2. Useful tutorial that covers combined usage on the client and server.

    1. You can call store.dispatch(action) from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals.

      For an example of dispatch at regular intervals, the SoundRedux media player app dispatches an action every time the play time of the current song, measured in seconds, changes.

    2. Now todoApp just gives it the slice of the state to manage, and todos knows how to update just that slice.

      This is great for the simple case where there is no interdependent state. For ideas on what to do when one part of the state tree depends on another, see http://stackoverflow.com/questions/34782948/how-can-i-model-interdependent-data-with-cascading-updates-in-redux/34796163#34796163

  24. Dec 2015
  25. Sep 2015
    1. If your head boiled from reading the above section, imagine what it was like to write it.

      I find this slightly disturbing to read in the documentation (!)

  26. Aug 2015
    1. Probably the best explanation I've seen yet on the why and how of a functional approach to UI state management with Redux