https://github.com/tkssharma/redux-training-2020
Redux Training 2020 - YouTube Training
https://github.com/tkssharma/redux-training-2020
react-redux reducers redux redux-middleware redux-persist redux-store redux-thunk
Last synced: 4 months ago
JSON representation
Redux Training 2020 - YouTube Training
- Host: GitHub
- URL: https://github.com/tkssharma/redux-training-2020
- Owner: tkssharma
- Created: 2020-08-16T11:48:09.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-18T05:35:30.000Z (about 5 years ago)
- Last Synced: 2025-01-20T13:32:35.400Z (9 months ago)
- Topics: react-redux, reducers, redux, redux-middleware, redux-persist, redux-store, redux-thunk
- Language: JavaScript
- Homepage: https://www.youtube.com/playlist?list=PLIGDNOJWiL18X8gaUi-PQYaOSHc9OAtIN
- Size: 301 KB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React with Redux using Dev tools
# Three Principles
Redux can be described in three fundamental principles:
### Single source of truth
**The [state](../Glossary.md#state) of your whole application is stored in an object tree within a single [store](../Glossary.md#store).**
This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or introspect an application; it also enables you to persist your app's state in development, for a faster development cycle. Some functionality which has been traditionally difficult to implement - Undo/Redo, for example - can suddenly become trivial to implement, if all of your state is stored in a single tree.
```js
export const HELLO_WORLD = 'HELLO_WORLD'
export const helloWorld = () => {
console.log('helloWorld actions')
return {
type: HELLO_WORLD
}
}
```
### State is read-only
**The only way to change the state is to emit an [action](../Glossary.md#action), an object describing what happened.**
This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
```js
import { combineReducers } from 'redux'
import { HELLO_WORLD } from './../actions'
const helloWorld = (state = { message: 'Hello' }, action) => {
switch (action.type) {
case HELLO_WORLD:
console.log('reducer: helloWorld')
return Object.assign({}, state, { message: 'Hello, World!' })
default:
return state
}
}
const helloReducer = combineReducers({
helloWorld : helloWorld
})
export default helloReducer
```
### Changes are made with pure functions
**To specify how the state tree is transformed by actions, you write pure [reducers](../Glossary.md#reducer).**
Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.