mirror of
https://github.com/Funkoala14/knowledgebase_law.git
synced 2025-06-08 18:28:17 +08:00
158 lines
7.9 KiB
Markdown
158 lines
7.9 KiB
Markdown
|
# <a href='https://redux.js.org'><img src='https://camo.githubusercontent.com/f28b5bc7822f1b7bb28a96d8d09e7d79169248fc/687474703a2f2f692e696d6775722e636f6d2f4a65567164514d2e706e67' height='60' alt='Redux Logo' aria-label='redux.js.org' /></a>
|
||
|
|
||
|
Redux is a predictable state container for JavaScript apps.
|
||
|
|
||
|
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
|
||
|
|
||
|
You can use Redux together with [React](https://react.dev), or with any other view library. The Redux core is tiny (2kB, including dependencies), and has a rich ecosystem of addons.
|
||
|
|
||
|
[**Redux Toolkit**](https://redux-toolkit.js.org) is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
|
||
|
|
||
|

|
||
|
[](https://www.npmjs.com/package/redux)
|
||
|
[](https://www.npmjs.com/package/redux)
|
||
|
[](https://discord.gg/0ZcbPKXt5bZ6au5t)
|
||
|
|
||
|
## Installation
|
||
|
|
||
|
### Create a React Redux App
|
||
|
|
||
|
The recommended way to start new apps with React and Redux Toolkit is by using [our official Redux Toolkit + TS template for Vite](https://github.com/reduxjs/redux-templates), or by creating a new Next.js project using [Next's `with-redux` template](https://github.com/vercel/next.js/tree/canary/examples/with-redux).
|
||
|
|
||
|
Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
|
||
|
|
||
|
```bash
|
||
|
# Vite with our Redux+TS template
|
||
|
# (using the `degit` tool to clone and extract the template)
|
||
|
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
|
||
|
|
||
|
# Next.js using the `with-redux` template
|
||
|
npx create-next-app --example with-redux my-app
|
||
|
```
|
||
|
|
||
|
We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
|
||
|
|
||
|
- https://github.com/rahsheen/react-native-template-redux-typescript
|
||
|
- https://github.com/rahsheen/expo-template-redux-typescript
|
||
|
|
||
|
```
|
||
|
npm install @reduxjs/toolkit react-redux
|
||
|
```
|
||
|
|
||
|
For the Redux core library by itself:
|
||
|
|
||
|
```
|
||
|
npm install redux
|
||
|
```
|
||
|
|
||
|
For more details, see [the Installation docs page](https://redux.js.org/introduction/installation).
|
||
|
|
||
|
## Documentation
|
||
|
|
||
|
The Redux core docs are located at **https://redux.js.org**, and include the full Redux tutorials, as well usage guides on general Redux patterns:
|
||
|
|
||
|
- [Introduction](https://redux.js.org/introduction/getting-started)
|
||
|
- [Tutorials](https://redux.js.org/tutorials/index)
|
||
|
- [Usage Guides](https://redux.js.org/usage/index)
|
||
|
- [FAQ](https://redux.js.org/faq)
|
||
|
- [API Reference](https://redux.js.org/api/api-reference)
|
||
|
|
||
|
The Redux Toolkit docs are available at **https://redux-toolkit.js.org**, including API references and usage guides for all of the APIs included in Redux Toolkit.
|
||
|
|
||
|
## Learn Redux
|
||
|
|
||
|
### Redux Essentials Tutorial
|
||
|
|
||
|
The [**Redux Essentials tutorial**](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) is a "top-down" tutorial that teaches "how to use Redux the right way", using our latest recommended APIs and best practices. We recommend starting there.
|
||
|
|
||
|
### Redux Fundamentals Tutorial
|
||
|
|
||
|
The [**Redux Fundamentals tutorial**](https://redux.js.org/tutorials/fundamentals/part-1-overview) is a "bottom-up" tutorial that teaches "how Redux works" from first principles and without any abstractions, and why standard Redux usage patterns exist.
|
||
|
|
||
|
### Help and Discussion
|
||
|
|
||
|
The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](https://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - please come and join us there!
|
||
|
|
||
|
## Before Proceeding Further
|
||
|
|
||
|
Redux is a valuable tool for organizing your state, but you should also consider whether it's appropriate for your situation. Please don't use Redux just because someone said you should - instead, please take some time to understand the potential benefits and tradeoffs of using it.
|
||
|
|
||
|
Here are some suggestions on when it makes sense to use Redux:
|
||
|
|
||
|
- You have reasonable amounts of data changing over time
|
||
|
- You need a single source of truth for your state
|
||
|
- You find that keeping all your state in a top-level component is no longer sufficient
|
||
|
|
||
|
Yes, these guidelines are subjective and vague, but this is for a good reason. The point at which you should integrate Redux into your application is different for every user and different for every application.
|
||
|
|
||
|
> **For more thoughts on how Redux is meant to be used, please see:**<br>
|
||
|
>
|
||
|
> - **[When (and when not) to reach for Redux](https://changelog.com/posts/when-and-when-not-to-reach-for-redux)**
|
||
|
> - **[You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)**<br>
|
||
|
> - **[The Tao of Redux, Part 1 - Implementation and Intent](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/)**<br>
|
||
|
> - **[The Tao of Redux, Part 2 - Practice and Philosophy](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/)**
|
||
|
> - **[Redux FAQ](https://redux.js.org/faq)**
|
||
|
|
||
|
## Basic Example
|
||
|
|
||
|
The whole global state of your app is stored in an object tree inside a single _store_.
|
||
|
The only way to change the state tree is to create an _action_, an object describing what happened, and _dispatch_ it to the store.
|
||
|
To specify how state gets updated in response to an action, you write pure _reducer_ functions that calculate a new state based on the old state and the action.
|
||
|
|
||
|
Redux Toolkit simplifies the process of writing Redux logic and setting up the store. With Redux Toolkit, the basic app logic looks like:
|
||
|
|
||
|
```js
|
||
|
import { createSlice, configureStore } from '@reduxjs/toolkit'
|
||
|
|
||
|
const counterSlice = createSlice({
|
||
|
name: 'counter',
|
||
|
initialState: {
|
||
|
value: 0
|
||
|
},
|
||
|
reducers: {
|
||
|
incremented: state => {
|
||
|
// Redux Toolkit allows us to write "mutating" logic in reducers. It
|
||
|
// doesn't actually mutate the state because it uses the Immer library,
|
||
|
// which detects changes to a "draft state" and produces a brand new
|
||
|
// immutable state based off those changes
|
||
|
state.value += 1
|
||
|
},
|
||
|
decremented: state => {
|
||
|
state.value -= 1
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
|
||
|
export const { incremented, decremented } = counterSlice.actions
|
||
|
|
||
|
const store = configureStore({
|
||
|
reducer: counterSlice.reducer
|
||
|
})
|
||
|
|
||
|
// Can still subscribe to the store
|
||
|
store.subscribe(() => console.log(store.getState()))
|
||
|
|
||
|
// Still pass action objects to `dispatch`, but they're created for us
|
||
|
store.dispatch(incremented())
|
||
|
// {value: 1}
|
||
|
store.dispatch(incremented())
|
||
|
// {value: 2}
|
||
|
store.dispatch(decremented())
|
||
|
// {value: 1}
|
||
|
```
|
||
|
|
||
|
Redux Toolkit allows us to write shorter logic that's easier to read, while still following the original core Redux behavior and data flow.
|
||
|
|
||
|
## Logo
|
||
|
|
||
|
You can find the official logo [on GitHub](https://github.com/reduxjs/redux/tree/master/logo).
|
||
|
|
||
|
## Change Log
|
||
|
|
||
|
This project adheres to [Semantic Versioning](https://semver.org/).
|
||
|
Every release, along with the migration instructions, is documented on the GitHub [Releases](https://github.com/reduxjs/redux/releases) page.
|
||
|
|
||
|
## License
|
||
|
|
||
|
[MIT](LICENSE.md)
|