- Oct 2020
-
letconst.com letconst.com
Tags
Annotators
URL
-
-
-
A first step would be to dispatch actions and update state via a reducer, something along the lines of useReducer in React.
Tags
Annotators
URL
-
- Jul 2020
-
kentcdodds.com kentcdodds.com
-
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
-
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.
-
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
-
- May 2020
-
redux.js.org redux.js.orgRedux1
-
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!
-
- Apr 2020
-
-
SPAs are incredibly common, popularised by client-side web frameworks like Angular, React and Vue.js.
SPAs:
- 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)
-
-
redux-toolkit.js.org redux-toolkit.js.org
-
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 默认加入
Tags
Annotators
URL
-
-
stackoverflow.com stackoverflow.com
-
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)获取数据和分发结果动作。
-
-
redux.js.org redux.js.orgRedux3
-
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)
不同类型的函数。
-
irst and foremost, combineReducers is simply a utility function to simplify the most common use case when writing Redux reducers.
comineReucers只是简化通用案例的应用函数。
-
functions should be relatively short and ideally only do one specific thing
函数最好是单一职责
-
-
redux.js.org redux.js.org
-
应用风格指南,值得参考的部分
-
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).
强烈建议,应用将文件夹结构按照功能特性划分
Tags
Annotators
URL
-
-
-
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
-
- Mar 2020
-
blog.logrocket.com blog.logrocket.com
-
you can make the component a container component by wrapping it in a higher-order component returned by connect().
从示例看出来,connect可以连接函数式组件,不仅仅是类组件。
-
react-redux包很简单,暴露了两个东西:Provider和connnect
-
-
react-redux.js.org react-redux.js.org
-
wrapping your entire application in a <Provider> component
还是需要Provider哦
-
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()
-
-
redux-toolkit.js.org redux-toolkit.js.org
-
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上面!
Tags
Annotators
URL
-
-
www.taniarascia.com www.taniarascia.com
-
And no longer requires you to install the redux-thunk or redux-devtools-extension dependencies.
Redux-Toolkit不再需要安装redux-thunk和redux-devtools-extension。
-
-
www.reactreduxtutorials.com www.reactreduxtutorials.com
-
文章讲解了作者在使用React Redux时的文件夹架构。作为他的最佳实践,可以参考一下。
-
-
redux-starter-kit.js.org redux-starter-kit.js.org
-
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太复杂
- 需要添加太多的包
- 需要很多模板代码
-
-
daveceddia.com daveceddia.com
-
To do that, the react-redux library comes with 2 things: a component called Provider, and a function called connect.
react-redux带来两样东西: 一个叫Provider的组件 一个叫connect的函数
-
Reducer Rule #2: Reducers must be pure functions.
Reducer规则2:必须是纯函数,不能用副作用。
-
-
redux-toolkit.js.org redux-toolkit.js.org
-
automatically handle all other action types by returning the current state
默认为返回当前状态。
-
in most apps, you won't need to use them yourself - createSlice is all you need.
所以说,有时候使用createSlice就同时有了createReducer和createActions.
Tags
Annotators
URL
-
-
redux.js.org redux.js.org
-
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.
整个App状态存在单个Store对象树。改变状态的只有action,一个描述发生个么的对象。然后reducer负责状态改变。
Tags
Annotators
URL
-
- Feb 2020
-
thoughtbot.com thoughtbot.com
-
Good explanation of how to convert to using react hooks with redux store.
Tags
Annotators
URL
-
- Jan 2020
-
www.thegreatcodeadventure.com www.thegreatcodeadventure.com
-
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.
-
- Nov 2019
-
www.ag-grid.com www.ag-grid.comag-Grid2
-
-
This section introduces how React components using the ag-Grid Data Table can take advantage of a Redux store to simplify state management.
-
-
reactjs.org reactjs.org
-
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
-
- Aug 2019
-
medium.com medium.com
-
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.
-
- Apr 2019
- Jan 2019
-
blog.rangle.io blog.rangle.io
-
.
-
-
slides.com slides.com
Tags
Annotators
URL
-
-
react-china.org react-china.org
-
这样可以方便的进行单元测试,不需要模拟Api.fetch函数的具体返回结果。
非模拟时,由redux-saga内部的调度器帮我们执行 next(在异步函数或副作用函数执行获得结果后);
模拟时,由测试函数自己根据需要执行 next,所以说无需模拟 Api.fetch 函数的具体返回结果,从而为测试带来了方便
Tags
Annotators
URL
-
- Nov 2018
-
nicolashery.com nicolashery.com
Tags
Annotators
URL
-
- Oct 2018
-
github.com github.com
-
-
redux-actions.js.org redux-actions.js.org
-
-
www.thegreatcodeadventure.com www.thegreatcodeadventure.com
-
codeburst.io codeburst.io
Tags
Annotators
URL
-
-
gkedge.gitbooks.io gkedge.gitbooks.io
Tags
Annotators
URL
-
-
devguides.io devguides.ioRedux1
-
-
redux.js.org redux.js.org
-
-
www.javascripttuts.com www.javascripttuts.com
-
github.com github.com
Tags
Annotators
URL
-
- Sep 2018
-
daveceddia.com daveceddia.com
Tags
Annotators
URL
-
- Jul 2018
-
github.com github.com
-
const shopItemsSelector = state => state.shop.items const taxPercentSelector = state => state.shop.taxPercent
This is a selector
-
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.
Tags
Annotators
URL
-
- Apr 2017
- Feb 2017
-
-
Twitter's mobile app is useful as a "production" example of what an application state tree can look like.
-
- Apr 2016
-
www.ember-redux.com www.ember-redux.com
-
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.
-
- Mar 2016
-
github.com github.com
-
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.
-
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
Tags
Annotators
URL
-
-
www.youtube.com www.youtube.com
-
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.
-
- Feb 2016
-
riadbenguella.com riadbenguella.com
- Jan 2016
-
teropa.info teropa.info
-
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.
-
Useful tutorial that covers combined usage on the client and server.
-
-
redux.js.org redux.js.org
-
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.
-
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
-
-
-
Very useful overview of the conceptual differences between several modern UI architectures
-
-
egghead.io egghead.io
- Dec 2015
-
egghead.io egghead.io
-
Recommends "deepFreeze" lib to protect against unexpected mutations to objects and arrays.
-
- Sep 2015
-
rackt.github.io rackt.github.io
-
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 (!)
-
- Aug 2015
-
blog.andyet.com blog.andyet.com
-
Probably the best explanation I've seen yet on the why and how of a functional approach to UI state management with Redux
-