summaryrefslogtreecommitdiffstats
path: root/devtools/docs/redux-guidelines.md
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/docs/redux-guidelines.md
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/docs/redux-guidelines.md')
-rw-r--r--devtools/docs/redux-guidelines.md52
1 files changed, 52 insertions, 0 deletions
diff --git a/devtools/docs/redux-guidelines.md b/devtools/docs/redux-guidelines.md
new file mode 100644
index 000000000..1782a6de4
--- /dev/null
+++ b/devtools/docs/redux-guidelines.md
@@ -0,0 +1,52 @@
+### Getting data from the store
+
+To get data from the store, use `connect()`.
+
+When using connect, you'll break up your component into two parts:
+
+1. The part that displays the data (presentational component)
+
+ // todos.js
+ const Todos = React.createClass({
+ propTypes: {
+ todos: PropTypes.array.isRequired
+ }
+
+ render: function() {...}
+ })
+
+ module.exports = Todos;
+
+2. The part that gets the data from the store (container component)
+
+ // todos-container.js
+ const Todos = require("path/to/todos");
+
+ function mapStateToProps(state) {
+ return {
+ todos: state.todos
+ };
+ }
+
+ module.exports = connect(mapStateToProps)(Todos);
+
+
+`connect()` generates the container component. It wraps around the presentational component that was passed in (e.g. Todos).
+
+The `mapStateToProps` is often called a selector. That's because it selects data from the state object. When the container component is rendering, the the selector will be called. It will pick out the data that the presentational component is going to need. Redux will take this object and pass it in to the presentational component as props.
+
+With this setup, a presentational component is easy to share across different apps. It doesn't have any dependencies on the app, or any hardcoded expectations about how to get data. It just gets props that are passed to it and renders them.
+
+For more advanced use cases, you can pass additional parameters into the selector and `connect()` functions. Read about those in the [`connect()`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) docs.
+
+---
+
+Need to answer the following questions:
+
+* How do I do I load asynchronous data?
+* How do I do optimistic updates or respond to errors from async work?
+* Do I use Immutable.js for my state?
+* What file structure should I use?
+* How do I test redux code?
+
+And more.