Çocuk, annesinin mezarı önünde çaresizce ağlıyor, onun hâlâ hayatta olduğunu iddia ediyordu – polis müdahale edene kadar kimse onu dinlemedi.
Mayıs başlarında, mezarlığı ziyaret eden bir çocuk dikkat çekmeye başladı.
On yaşlarında, belki daha küçüktü. Her gün aynı mezara geliyordu.
Soğuk taşa yaslanarak yere oturur, gökyüzüne doğru bağırırdı:
“O yaşıyor! Burada değil!”
Ziyaretçiler onu hüzünle izler, acısını anladıklarını düşünürdü.
Annesinin kaybını kabullenememişti. Zamanla bunu kabul edecekti.
Ancak haftalar geçti, çocuk hava ne olursa olsun mezarlığa gelmeye devam etti.
Mezarlık görevlisi bu duruma daha fazla dayanamadı ve polisi aradı.
Genç bir memur geldi, çocuğa yavaşça yaklaştı.
“Merhaba,” dedi yumuşak bir sesle.
Çocuk irkildi, gözlerini kRolling Dice (React + Redux)
============================
In this assignment you will convert the dice rolling game that we made in earlier assignments to Redux. The goal is to have all state managed via the store.
First, start by installing the required dependencies via NPM (including `node-sass`). Then, run the `start` script via NPM. You can view the application at `http://localhost:3000`.
The application is divided into three separate pages:
1. A home page where users can specify the number of dice they want to rollthe application comes preloaded with one die showing 6 dotsand then roll them.
2. A board game page that displays a grid of dice where the user can click individual dice to freeze them.
3. A history page that displays history of dice rolls for that game session.
The implementation you are given uses React state to store the dice information. You need to refactor it to use Redux instead. To do this, create a Redux store that keeps track of the following:
1. The current dice and their values (which can be frozen).
2. The history of rolls the user has made (rolls should have timestamps).
3. The number of dice the user wants to roll.
4. Which page the user is currently viewing.
You will need to create an action for each of the following:
1. Starting a new roll (i.e., clicking the “Roll” button).
2. Freezing a die (i.e., clicking a die on the board).
3. Changing the number of dice (i.e., changing the input on the home page).
4. Changing the page (i.e., clicking any of the navigation links).
For the “Roll” functionality, we want you to implement an asynchronous action creator that calculates the dice roll and then dispatches an action (or actions) to update the store. To calculate a dice roll for *N* dice, have the action creator (a) dispatch an action indicating that the dice are being rolled, then (b) wait 1 second, then (c) dispatch another action with the results of the roll. The purpose of the first dispatch is to give you a chance to show a “rolling…” indicator in the UI (which we’ve already implemented for you). Even if you don’t implement this exactly as specified, you *must* have an asynchronous action creator somewhere in your solutionthis is an important aspect of Redux we want you to learn.
Once you’ve converted the application to use Redux, it should function exactly like the original implementation. Clicking links should change pages, rolling dice should generate new random numbers, freezing dice should prevent them from being rerolled, and so on. Additionally, the history page should show all dice rolls that have been madenot just the current page’s rollsin reverse chronological order (newest entries first). Each entry should include the timestamp of when the roll was completed (not when it was started) as well as the values for all dice that were part of the roll (frozen dice should not be included in the roll).
This is a complicated assignment, so plan carefully. Think about what data should be kept in the store, how the actions will modify that data, and how the reducers will be organized. Once you have a plan, implement the reducers and then modify the components to pull their state from the store rather than from React state. The components should become much simpler once they don’t have to keep track of their own state.
We strongly recommend creating a test Redux store in a separate file (similar to what we did in lecture) so you can test your reducers before plugging them in to the application.
### Tips
1. The `uuid` package is already included in the project. You can use this to generate unique IDs for dice and rolls. This is useful for things like generating keys for React lists and finding specific dice to freeze.
2. The `prop-types` package is also already included. Make sure you define PropTypes for all components that receive props from the store.
3. The `board` page will need to know which dice are part of the current roll. You can either (a) explicitly mark them in the store, or (b) filter the dice in the selector based on which ones are frozen. Either method is acceptable.
4. We’ve included `react-router` in the project to handle the pages, but you will need to install `react-router-dom` (and its type definitions, if using TypeScript) yourself.
5. When changing the number of dice (on the home page), you will probably want to reset the gamemeaning, clear any dice currently being displayed and clear the history. This ensures the user doesn’t see old dice when they start a new game.
6. When freezing dice on the board page, you only want to freeze dice that are part of the current roll (i.e., not already frozen). This prevents users from unfreezing dice by clicking on them.
Press «Like» and get the best posts on Facebook ↓
