The original address: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
People always choose redux before they really need redux. The starting point may be, "even if I don't need it now, I'm going to use it for the future scalability of the project." However, after developing the handwriting code, I found the inconvenience: "Why do I need to add three files to achieve a simple function?" "People blame these pains on redux,react, functional programming, immutability, etc." It's normal to have this idea, because it's natural to compare redux with other methods that don't require a "template" to update the state, which leads to a more complex conclusion redux. In a way, that's what Redux is, and that's what it's designed to do. Redux does have a lot of benefits, but it's also very restrictive: you have to use objects and arrays to describe how the state must describe the system's changes with a simple object. In fact, it is necessary to describe the logic of the change with a pure function, without redux, react Building an application does not need to comply with these restrictions. And these are very strict restrictions, so even if used only in part of the program, it is worth careful consideration, there is really good reason to do so. For me, these restrictions are useful--the following features are built with the help of these restrictions: the state exists locally, so that when the page is closed and then the state link server is sent to the client in HTML, the page link is opened on this state basis. Serializes a user action when a bug is triggered and obtains a state snapshot to send a bug report to facilitate the development of a recurring bug link passing the Action object over the network to achieve a collaborative environment without complex code modification links Implementation of the Undo function and action to achieve optimistic updates (i.e., the page UI first change, and then change the UI based on server return results, error rollback), instead of complex code to modify the link in the state record switch, when the code changes according to the action history to calculate the current state link Provides complete inspection and control capabilities for development tools to facilitate the development of custom tool links for your own programs to provide alternative UI links that reuse most of the business logic
If you are doing an extensible terminal, JS debugger, or other similar app, try it, at least consider these ideas (though they are not the first to be presented with link links). However, if you are just learning react, don't take redux as your first choice. After chewing react's document, if you really have some need to use Redux, or if you want to try something new, you can use redux. But use it sparingly, as you would any other highly rated tool. If you feel pressured to write code in a redux way, it's probably a sign that you and your teammates are too focused on it. In fact, Redux is just an optional tool (hot load 2016redux). Finally, you can refer to Redux's ideas instead of actually using redux to achieve them. For example, a react component with local state: Import react, {Component} from ' react '; Class Counter extends Component { state = {value:0}; increment = () => { This.setstate (prevstat E => ({ Value:prevState.value + 1 })); }; decrement = () => { This.setstate (prevstate => ({ value:prevstate.value-1 })); }; Render () { return ( <div> {this.state.value} <button OnClick = {This.increm ENT}> + </button> < button OnClick = {this.decrement}>-</button> </div> &nbs P }} This is good to write and can be reused. Local state is also doing well. The tradeoff offered by Redux is to decouple "what happened" and "how to change." Then it isIt's not always going to be so perfect, no, it's just a compromise. To raise a chestnut, we can extract a reducer from our components:
Import react, {Component} from ' react '; Const COUNTER = (state = {value:0}, action) => {switch (action.type) {case ' INCREMENT ': return {Value:stat E.value + 1}; Case ' decrement ': return {value:state.value-1}; Default:return State; The class Counter extends Component {state = Counter (undefined, {}); Dispatch (Action) {this.setstate (prevstate => counter (prevstate, action)); } increment = () => {this.dispatch ({type: ' increment '}); }; Decrement = () => {this.dispatch ({type: ' decrement '}); }; Render () {return (<div> {this.state.value} <button OnClick = {this.increment}> + </button> <button OnClick = {this.decrement} >-</button> </div>)}
Notice how we can use redux without running the NPM install real installation. Isn't it amazing. Of course, you don't necessarily do this to your component with state. Unless you know what you can gain from it. The Redux library is just a tool to help bind reducers to global storage, and how to use redux is entirely personal. The main thing is, before you decide to use it, think clearly about the benefits you can get.
