Documente Academic
Documente Profesional
Documente Cultură
of Contents
Introduction 1.1
Information Flow in a React/Redux application 1.2
Creating Redux applications 1.3
1
Introduction
React-Redux
My personal notes on building a React/Redux application.
2
Information Flow in a React/Redux application
function addTodo(text){
return ({
type: "ADD_TODO",
text
})
}
dispatch(addTodo(text))
dispatch(completeTodo(index))
After we fired the action, somebody should catch the action. These are the reducers, or
reducer functions. Before creating the reducers think about the shape of the application state
object. The reducers take the state, and the action, and spit out the next application state.
Important is that reducers MUST NOT mutate the state that they get to their input, they
MUST create an other state and return that state:
default:
return state;
}
}
3
Information Flow in a React/Redux application
So actions contain the information about what happened, reducers change the state of the
application, according to the action. Store is an object that brings them together:
So far we have attached the reducer to the store, now we can start dispatching actions:
store.dispatch(addTodo("Learn Redux!"));
store.dispatch(addTodo("Learn React!"));
So stores connect reducers and actions, this can be done with third party libraries, like
'react-redux', where we can use the connect method like this:
mapStateToProps(state){
/*Anything returned here will show up as props in the class that is connected via th
e connect method */
return {propsName: state.whateverWeWant}
}
export default connect(mapStateToProps)(todoApp)
4
Creating Redux applications
functional based if the component is simple, not getting any data from the server
class based if it is more complex, if it needs a constructor, if it ajaxes data from the
server