We are going to complete the Teropa tutorial listed below as a group over multiple weeks. We are going to learn about Redux, Immutable.js, and many other Javascript-based technologies.
Currying like crazy to generate a function that handles Middleware. Middleware is how we get our Actions to do async tasks, like send data to the server. We hooked up socket.io to the client so that we can send events(voting/next) to the server. Defined all our actions now as“action_creators” which is a single file that defines what actions are available in application. We connected OUTgoing actions from react components using connect(mapStateProps, actionsCreators)(Voting); This allowed any function(vote()) in action_creators.js to be made available to the React component that might reference that same function name(vote()). Basically, we connected both props and functions from component to store. Grok the below:
Argued about closures and what connect() actually does. connect() DOES NOT MUTATE Voting component, instead returns new, smarter components(VotingContainer) that is augmented with knowledge about the pieces of state it cares about.
Question: In“Introducing a Client Side Redux Store”, it is unclear that the reducer_spec.js file is on the server(it is on the server).
Covered: Voting results page, react router with App component that wraps it all, rendering sub elements, tested results page, still no vote click, however did the Next click which just runs function we pass to it.
The Tutorial
The Repo
Helpful Links
Tech
Log
const createStoreWithMiddleware = applyMiddleware( remoteActionMiddleware)(createStore);const store = createStoreWithMiddleware(reducer);function mapStateToProps(state) { return { pair: state.getIn(['vote', 'pair']), winner: state.get('winner') };}
export const VotingContainer = connect(mapStateToProps)(Voting);