redux, state, and you
What is Redux?
What is ‘Store’ in Redux?
in redux, this is where your state, reducers, and middleware are combined. for example:
import { createStore } from 'redux'
import reducers from './reducers'
import state from './state'export default createStore(reducers, state)
in the above example i left out middleware for the sake of simplicity.
How is state changed in Redux?
by dispatching actions to the reducer via a redux container (which is simply a regular component that is “connected” to redux — see below).
What is the difference between a Presentational component and a Container component?
a presentational component is a basic React component, i.e. one with no state and simply renders jsx onto the browser. once connected to a redux container, a global state (managed by redux) can now be passed into it as props, like you normally would with any other React component. this is accomplished with the redux methods mapStateToProps and mapDispatchToProps. for example, at the top of someContainer.js:
import { connect } from 'react-redux'
import DumbComponent from '../components/DumbComponent'
import { anAction } from '../redux/actions'const mapStateToProps = (state) => {
return {
newPropforThatDumbComponent: state.someProperty
}
}const mapDispatchToProps = (dispatch) => {
return {
anotherNewProp: () => dispatch(anAction())
}
}export default connect(mapStateToProps, mapDispatchToProps)(DumbComponent)
newPropForThatDumbComponent and anotherNewProp can now be accessed via DumbComponent via props.newPropForThatDumbComponent and props.anotherNewProp.
DumbComponent has no actual state of its own, but can now present a dynamic state. it is then a controlled, or presentational component.
What is the second argument that can optionally be passed to setState and what is its purpose?
the second (and optional) argument to setState is a callback function that runs right after the component is re-rendered (since setState itself re-renders the component). setState is actually asynchronous so it is useful (for general reasons) to have the ability to write a function that runs immediately after it, despite the fact that such a function is normally handled by a lifecycle method or hook.
What is your opinion of currently popular frameworks/libraries? List and provide your thoughts.
well i must admit that i have not researched all of the options and i chose React because it is the most popular and well-liked among the programming community. am i a bad person?
ok in all honesty i felt bad after i typed that and just spent a half hour with Vue.js. a couple paragraphs down there is a video that expertly explains it as simply as one could. but Vue is very intriguing and seems easier than React in some ways, and i will almost certainly learn it in the near future. i kinda already decided that but the video makes it even more appealing.
angular.js is not really appealing to me since it is more restrictive, but i would certainly learn it for the right price.
other frameworks/libraries are not on my radar, as it’s far more efficient to master one or maybe two than to dabble in several.
