{"id":17823453,"url":"https://github.com/lucasgabrieldeaa/mastering-redux","last_synced_at":"2026-05-07T11:33:32.768Z","repository":{"id":74266534,"uuid":"126524560","full_name":"lucasGabrielDeAA/mastering-redux","owner":"lucasGabrielDeAA","description":null,"archived":false,"fork":false,"pushed_at":"2018-03-27T18:19:19.000Z","size":522,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-02T11:09:53.149Z","etag":null,"topics":["react-native","reactotron","redux","redux-saga"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucasGabrielDeAA.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-23T18:26:39.000Z","updated_at":"2018-04-17T18:01:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4849a48-3ff0-4e7a-b99e-aa70157285d7","html_url":"https://github.com/lucasGabrielDeAA/mastering-redux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lucasGabrielDeAA/mastering-redux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasGabrielDeAA%2Fmastering-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasGabrielDeAA%2Fmastering-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasGabrielDeAA%2Fmastering-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasGabrielDeAA%2Fmastering-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucasGabrielDeAA","download_url":"https://codeload.github.com/lucasGabrielDeAA/mastering-redux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasGabrielDeAA%2Fmastering-redux/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32735196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","reactotron","redux","redux-saga"],"created_at":"2024-10-27T17:58:24.850Z","updated_at":"2026-05-07T11:33:32.752Z","avatar_url":"https://github.com/lucasGabrielDeAA.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mastering-redux\n\n## Installing [Redux](https://redux.js.org/)\n\nRun the following command:\n\n```\nyarn add redux react-redux\n```\n\nAfter the installation, create a folder named store under src folder, and add a file named index.js with the following content:\n\n```\nimport { createStore } from 'redux';\n\nimport reducers from './reducers';\n\nconst store = createStore(reducers);\n\nexport default store;\n```\n\nUnder the same folder, create another folder, called reducers. In this folder we going to put our redux configuration. Now create a file called index.js with the following content:\n\n```\nimport { combineReducers } from 'redux';\n\nimport todos from './todos'; // Here you put the imports os your reducers, in this case, our reducer, calls todos\n\nexport default combineReducers({\n  todos,\n});\n```\nNow create your reducer file, todos.js, under reducers folder. And put the following content:\n\n```\nimport {\n  ADD_TODO,\n  REMOVE_TODO,\n} from '../actions/todos';\n\nconst initialState = [\n  { id: 0, text: 'Make coffee' },\n  { id: 1, text: 'Learn goNative' },\n];\n\n\nexport default function todos(state = initialState, action) {\n  switch (action.type) {\n    case ADD_TODO:\n      return [...state, { id: Math.random(), text: action.payload.text }];\n    case REMOVE_TODO:\n      return state.filter(todo =\u003e todo.id !== action.payload.id);\n    default:\n      return state;\n  }\n}\n```\n\nTo link the redux to our App, we going to make some adjustments in our index.js of the src folder.\n\n```\nimport React from 'react';\nimport { Provider } from 'react-redux';\n\nimport 'config/ReactotronConfig';\nimport store from 'store';\n\nimport TodoList from './TodoList'; //Here we import our components, to connect to redux\n\nconst App = () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cTodoList /\u003e\n  \u003c/Provider\u003e\n);\n\nexport default App;\n```\n\nAfter all, we need to create our actions, to dispatch our redux's funcionalities. Under the store folder, create another folder, called actions. And in this folder, we going to create files to each redux we're going to use in the application. Each action will perform ours redux-functions using the type, do describe the functionality. Create the todos.js, with this content:\n\n```\nexport const ADD_TODO = 'ADD_TODO';\nexport const REMOVE_TODO = 'REMOVE_TODO';\n\nexport const addTodo = text =\u003e ({\n  type: ADD_TODO,\n  payload: {\n    text,\n  },\n});\n\nexport const removeTodo = id =\u003e ({\n  type: REMOVE_TODO,\n  payload: {\n    id,\n  },\n});\n```\n## Installing the Reactotron-redux\n\nRun the following command:\n\n```\nyarn add reactotron-redux\n```\n\nAfter installation, we need to make some adjustments in our reactotron's config file, and redux's index store file too. In the ReactotronConfig.js, add the following content:\n\n```\n...\nimport { reactotronRedux } from 'reactotron-redux';\n\n{\n    ...\n    .use(reactotronRedux())\n}\n```\n\nIn index.js of the store folder, replace the content, for this content:\n\n```\nimport { createStore, applyMiddleware } from 'redux';\n\nimport reducers from './reducers';\n\nconst middleware = [];\n\nconst createApropriateStore = __DEV__ ? console.tron.createStore : createStore;\nconst store = createApropriateStore(reducers, applyMiddleware(...middleware));\n\nexport default store;\n```\n\nNow, we can use the reactotron to watch our redux's workflow and perfoms some redux actions too.\n\n## Installing [Redux-Saga](https://redux-saga.js.org/)\n\nWe going to use saga as our middleware to perform redux actions. First of all, install the redux-saga using the following command:\n\n```\nyarn add redux-saga\n```\n\nAfter installation, we need to create our file's structure to configure our saga.\n\nUnder the store's folder, create a folder called sagas, with a index.js, this file will mix it up all of ours sagas files configuration of the project, place the the following content in the file:\n\n```\nimport { all } from 'redux-saga/effects';\n\nexport default function* rootSaga() {\n  return yield all([\n\n  ]);\n}\n```\n\nNow, we need to add our saga's middleware to our redux's file configuration.\n\nIn the index.js of the store's folder, perform the following changes:\n\n```\nimport { createStore, applyMiddleware } from 'redux';\nimport createSagaMiddleware from 'redux-saga';\n\nimport reducers from './reducers';\nimport sagas from './sagas';\n\nconst sagaMiddleware = createSagaMiddleware();\n\nconst middleware = [\n  sagaMiddleware,\n];\n\nconst createApropriateStore = __DEV__ ? console.tron.createStore : createStore;\nconst store = createApropriateStore(reducers, applyMiddleware(...middleware));\n\nsagaMiddleware.run(sagas);\n\nexport default store;\n```\n\nNow, we already have the saga configured to our project.\n\n## Installing the Reactotron-redux-saga\n\nRun the following command:\n\n```\nyarn add reactotron-redux-saga\n```\n\nNow, in the Reactotron.js under the src/config folder, add the following lines:\n\n```\nimport sagaPlugin from 'reactotron-redux-saga';\n\n...\n.use(sagaPlugin())\n...\n```\n\nNow, in the index.js under the store folder, do the following changes:\n\n```\n...\nconst sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;\nconst sagaMiddleware = createSagaMiddleware({ sagaMonitor });\n...\n```\n\nAfter all, we already have the saga plugged to our reactotron.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasgabrieldeaa%2Fmastering-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucasgabrieldeaa%2Fmastering-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasgabrieldeaa%2Fmastering-redux/lists"}