React Redux

  • Post
    React Redux

    Redux adalah pustaka JavaScript sumber terbuka yang digunakan untuk mengelola status aplikasi. React menggunakan Redux untuk membangun antarmuka pengguna. Ini pertama kali diperkenalkan oleh Dan Abramov dan Andrew Clark pada 2015 .

    React Redux adalah pengikat React resmi untuk Redux. Ini memungkinkan komponen React membaca data dari Redux Store, dan mengirimkan Actions ke Store untuk memperbarui data. Redux membantu aplikasi untuk menskalakan dengan menyediakan cara yang masuk akal untuk mengelola status melalui model aliran data searah. React Redux secara konseptual sederhana. Itu berlangganan ke toko Redux, memeriksa untuk melihat apakah data yang diinginkan komponen Anda telah berubah, dan merender ulang komponen Anda.

    Redux terinspirasi oleh Flux. Redux mempelajari arsitektur Flux dan menghilangkan kerumitan yang tidak perlu.

    • Redux tidak memiliki konsep Dispatcher.
    • Redux memiliki satu-satunya Store sedangkan Flux memiliki banyak Store.
    • Objek Action akan diterima dan ditangani langsung oleh Store.

    Mengapa menggunakan React Redux?

    Alasan utama menggunakan React Redux adalah:

    • React Redux adalah binding UI resmi untuk Aplikasi react. Itu selalu diperbarui dengan perubahan API apa pun untuk memastikan bahwa komponen React Anda berperilaku seperti yang diharapkan.
    • Ini mendorong arsitektur ‘React’ yang baik.
    • Ini mengimplementasikan banyak pengoptimalan kinerja secara internal, yang memungkinkan komponen merender ulang hanya ketika benar-benar dibutuhkan.

    Arsitektur Redux

    Komponen arsitektur Redux dijelaskan di bawah ini.

    STORE: Toko adalah tempat di mana seluruh status aplikasi Anda terdaftar. Ini mengelola status aplikasi dan memiliki fungsi pengiriman (tindakan). Ini seperti otak yang bertanggung jawab atas semua bagian yang bergerak di Redux.

    TINDAKAN: Tindakan dikirim atau dikirim dari tampilan yang merupakan muatan yang dapat dibaca oleh Pengurang. Ini adalah objek murni yang dibuat untuk menyimpan informasi acara pengguna. Ini mencakup informasi seperti jenis tindakan, waktu terjadinya, lokasi kejadian, koordinatnya, dan keadaan mana yang ingin diubah.

    REDUCER: Peredam membaca muatan dari tindakan dan kemudian memperbarui penyimpanan melalui negara bagian yang sesuai. Ini adalah fungsi murni untuk mengembalikan keadaan baru dari keadaan awal.

    Instalasi Redux

    Persyaratan: React Redux membutuhkan React 16.8.3 atau versi yang lebih baru.

    Untuk menggunakan React Redux dengan aplikasi React, Anda perlu menginstal perintah di bawah ini.

    1. $ npm instal redux react-redux –save

     

    Contoh React Redux

    Di bagian ini, kita akan belajar bagaimana mengimplementasikan Redux di aplikasi React. Di sini, kami memberikan contoh sederhana untuk menghubungkan Redux dan React.

    Langkah-1 Buat proyek react baru menggunakan perintah create-react-app . Saya memilih nama proyek: ” reactproject .” Sekarang, instal Redux dan React-Redux .

    1.    javatpoint @root : ~ / Desktop $ npx create-react-app reactproject

    2.    javatpoint @root : ~ / Desktop / reactproject $ npm instal redux react-redux –save

    Langkah-2 Buat File dan Folder

    Pada langkah ini, kita perlu membuat folder dan file untuk tindakan, reduksi, komponen, dan wadah. Setelah membuat folder dan file.

     

    Langkah-3 Tindakan

    Ini menggunakan properti ‘ type ‘ untuk menginformasikan tentang data yang harus dikirim ke Store . Di folder ini, kita akan membuat dua file: index.js dan index.spec.js . Di sini, kami telah membuat pembuat tindakan yang mengembalikan tindakan kami dan menetapkan id untuk setiap item yang dibuat.

    Index.js

    1.    let nextTodoId = 0

    2.    export const addTodo = text => ({

    3.      type: ‘ADD_TODO’,

    4.      id: nextTodoId++,

    5.      text

    6.    })

    7.

    8.    export const setVisibilityFilter = filter => ({

    9.      type: ‘SET_VISIBILITY_FILTER’,

    10.   filter

    11. })

    12.

    13. export const toggleTodo = id => ({

    14.   type: ‘TOGGLE_TODO’,

    15.   id

    16. })

    17.

    18. export const VisibilityFilters = {

    19.   SHOW_ALL: ‘SHOW_ALL’,

    20.   SHOW_COMPLETED: ‘SHOW_COMPLETED’,

    21.   SHOW_ACTIVE: ‘SHOW_ACTIVE’

    22. }

    Index.spec.js

    1.    import * as actions from ‘./index’

    2.

    3.    describe(‘todo actions’, () => {

    4.      it(‘addTodo should create ADD_TODO action’, () => {

    5.        expect(actions.addTodo(‘Use Redux’)).toEqual({

    6.          type: ‘ADD_TODO’,

    7.          id: 0,

    8.          text: ‘Use Redux’

    9.        })

    10.   })

    11.

    12.   it(‘setVisibilityFilter should create SET_VISIBILITY_FILTER action’, () => {

    13.     expect(actions.setVisibilityFilter(‘active’)).toEqual({

    14.       type: ‘SET_VISIBILITY_FILTER’,

    15.       filter: ‘active’

    16.     })

    17.   })

    18.

    19.   it(‘toggleTodo should create TOGGLE_TODO action’, () => {

    20.     expect(actions.toggleTodo(1)).toEqual({

    21.       type: ‘TOGGLE_TODO’,

    22.       id: 1

    23.     })

    24.   })

    25. })

    Langkah-4 Reducers

    Seperti yang kita ketahui, Tindakan hanya memicu perubahan di aplikasi, dan Pengurang menentukan perubahan tersebut. Reducer adalah fungsi yang mengambil dua parameter ‘Action’ dan ‘State’ untuk menghitung dan mengembalikan State yang diperbarui. Itu membaca muatan dari ‘Tindakan’ dan kemudian memperbarui ‘Toko’ melalui Negara yang sesuai.

    Dalam file yang diberikan, setiap Reducer mengelola bagian Negara globalnya sendiri. Parameter Status berbeda untuk setiap Reducer dan sesuai dengan bagian ‘State’ yang dikelolanya. Saat aplikasi menjadi lebih besar, kami dapat membagi Pengurang menjadi file terpisah dan menjaganya tetap independen dan mengelola domain data yang berbeda.

    Di sini, kami menggunakan fungsi pembantu ‘CombineReducers’ untuk menambahkan Reducer baru yang mungkin kami gunakan di masa mendatang.

    index.js

    1.    import { combineReducers } from ‘redux’

    2.    import todos from ‘./todos’

    3.    import visibilityFilter from ‘./visibilityFilter’

    4.

    5.    export default combineReducers({

    6.      todos,

    7.      visibilityFilter

    8.    })

    Todos.js

    1.    const todos = (state = [], action) => {

    2.      switch (action.type) {

    3.        case ‘ADD_TODO’:

    4.          return [

    5.            …state,

    6.            {

    7.              id: action.id,

    8.              text: action.text,

    9.              completed: false

    10.         }

    11.       ]

    12.     case ‘TOGGLE_TODO’:

    13.       return state.map(todo =>

    14.         (todo.id === action.id)

    15.           ? {…todo, completed: !todo.completed}

    16.           : todo

    17.       )

    18.     default:

    19.       return state

    20.   }

    21. }

    22. export default todos

    Todos.spec.js

    1.    import todos from ‘./todos’

    2.

    3.    describe(‘todos reducer’, () => {

    4.      it(‘should handle initial state’, () => {

    5.        expect(

    6.          todos(undefined, {})

    7.        ).toEqual([])

    8.      })

    9.

    10.   it(‘should handle ADD_TODO’, () => {

    11.     expect(

    12.       todos([], {

    13.         type: ‘ADD_TODO’,

    14.         text: ‘Run the tests’,

    15.         id: 0

    16.       })

    17.     ).toEqual([

    18.       {

    19.         text: ‘Run the tests’,

    20.         completed: false,

    21.         id: 0

    22.       }

    23.     ])

    24.

    25.     expect(

    26.       todos([

    27.         {

    28.           text: ‘Run the tests’,

    29.           completed: false,

    30.           id: 0

    31.         }

    32.       ], {

    33.         type: ‘ADD_TODO’,

    34.         text: ‘Use Redux’,

    35.         id: 1

    36.       })

    37.     ).toEqual([

    38.       {

    39.         text: ‘Run the tests’,

    40.         completed: false,

    41.         id: 0

    42.       }, {

    43.         text: ‘Use Redux’,

    44.         completed: false,

    45.         id: 1

    46.       }

    47.     ])

    48.

    49.     expect(

    50.       todos([

    51.         {

    52.           text: ‘Run the tests’,

    53.           completed: false,

    54.           id: 0

    55.         }, {

    56.           text: ‘Use Redux’,

    57.           completed: false,

    58.           id: 1

    59.         }

    60.       ], {

    61.         type: ‘ADD_TODO’,

    62.         text: ‘Fix the tests’,

    63.         id: 2

    64.       })

    65.     ).toEqual([

    66.       {

    67.         text: ‘Run the tests’,

    68.         completed: false,

    69.         id: 0

    70.       }, {

    71.         text: ‘Use Redux’,

    72.         completed: false,

    73.         id: 1

    74.       }, {

    75.         text: ‘Fix the tests’,

    76.         completed: false,

    77.         id: 2

    78.       }

    79.     ])

    80.   })

    81.

    82.   it(‘should handle TOGGLE_TODO’, () => {

    83.     expect(

    84.       todos([

    85.         {

    86.           text: ‘Run the tests’,

    87.           completed: false,

    88.           id: 1

    89.         }, {

    90.           text: ‘Use Redux’,

    91.           completed: false,

    92.           id: 0

    93.         }

    94.       ], {

    95.         type: ‘TOGGLE_TODO’,

    96.         id: 1

    97.       })

    98.     ).toEqual([

    99.       {

    100.                       text: ‘Run the tests’,

    101.                       completed: true,

    102.                       id: 1

    103.                     }, {

    104.                       text: ‘Use Redux’,

    105.                       completed: false,

    106.                       id: 0

    107.                     }

    108.                   ])

    109.                 })

    110.               })

    VisibilityFilter.js

    1.    import { VisibilityFilters } from ‘../actions’

    2.

    3.    const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {

    4.      switch (action.type) {

    5.        case ‘SET_VISIBILITY_FILTER’:

    6.          return action.filter

    7.        default:

    8.          return state

    9.      }

    10. }

    11. export default visibilityFilter

    Langkah-5 Komponen

    Ini adalah Komponen Presentasional, yang berkaitan dengan bagaimana hal-hal terlihat seperti markup, gaya. Ini menerima data dan memanggil panggilan balik secara eksklusif melalui alat peraga. Itu tidak tahu dari mana data itu berasal atau bagaimana mengubahnya. Itu hanya memberikan apa yang diberikan kepada mereka.

    App.js

    Ini adalah komponen root yang menampilkan semua yang ada di UI.

     

    import React from ‘react’

    import Footer from ‘./Footer’

    import AddTodo from ‘../containers/AddTodo’

    import VisibleTodoList from ‘../containers/VisibleTodoList’

    const App = () => (

    <AddTodo />

    <VisibleTodoList />

    <Footer />

    )

    export default App

    Footer.js

    Ini memberitahu di mana pengguna mengubah todos saat ini terlihat .

    import React from ‘react’

    import FilterLink from ‘../containers/FilterLink’

    import { VisibilityFilters } from ‘../actions’

    const Footer = () => (

    <p>

    Show: <FilterLink filter={VisibilityFilters.SHOW_ALL}>All</FilterLink>

    {‘, ‘}

    <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>Active</FilterLink>

    {‘, ‘}

    <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>Completed</FilterLink>

    </p>

    )

    export default Footer

    Link.js

    Ini adalah tautan dengan panggilan balik.

    1.    import React from ‘react’

    2.    import PropTypes from ‘prop-types’

    3.

    4.    const Link = ({ active, children, onClick }) => {

    5.      if (active) {

    6.        return {children}

    7.      }

    8.

    9.      return (

    10.     <a

    11.       href=””

    12.       onClick={e => {

    13.         e.preventDefault()

    14.         onClick()

    15.       }}

    16.     >

    17.       {children}

    18.     

    19.   )

    20. }

    21.

    22. Link.propTypes = {

    23.   active: PropTypes.bool.isRequired,

    24.   children: PropTypes.node.isRequired,

    25.   onClick: PropTypes.func.isRequired

    26. }

    27.

    28. export default Link

    Todo.js

    Ini mewakili satu item rencana yang menampilkan teks .

    1.    import React from ‘react’

    2.    import PropTypes from ‘prop-types’

    3.

    4.    const Todo = ({ onClick, completed, text }) => (

    5.      <li

    6.        onClick={onClick}

    7.        style={{

    8.          textDecoration: completed ? ‘line-through’ : ‘none’

    9.        }}

    10.   >

    11.     {text}

    12.   

    13. )

    14.

    15. Todo.propTypes = {

    16.   onClick: PropTypes.func.isRequired,

    17.   completed: PropTypes.bool.isRequired,

    18.   text: PropTypes.string.isRequired

    19. }

    20.

    21. export default Todo

    TodoList.js

    Ini adalah daftar untuk menampilkan todos {id, text, complete}.

    1.    import React from ‘react’

    2.    import PropTypes from ‘prop-types’

    3.    import Todo from ‘./Todo’

    4.

    5.    const TodoList = ({ todos, onTodoClick }) => (

    6.      

      7.        {todos.map((todo, index) => (

      8.          <Todo key={index} {…todo} onClick={() => onTodoClick(index)} />

      9.        ))}

      10.   

    11. )

    12.

    13. TodoList.propTypes = {

    14.   todos: PropTypes.arrayOf(

    15.     PropTypes.shape({

    16.       id: PropTypes.number.isRequired,

    17.       completed: PropTypes.bool.isRequired,

    18.       text: PropTypes.string.isRequired

    19.     }).isRequired

    20.   ).isRequired,

    21.   onTodoClick: PropTypes.func.isRequired

    22. }

    23. export default TodoList

    Langkah-6 Kontainer

    Ini adalah Komponen Penampung yang peduli dengan cara kerja seperti pengambilan data, status pembaruan. Ini memberikan data dan perilaku untuk komponen presentasi atau komponen wadah lainnya. Ini menggunakan Redux State untuk membaca data dan mengirimkan Redux Action untuk memperbarui data.

    AddTodo.js

    Ini berisi bidang input dengan tombol TAMBAH (kirim).

    1.    import React from ‘react’

    2.    import { connect } from ‘react-redux’

    3.    import { addTodo } from ‘../actions’

    4.

    5.    const AddTodo = ({ dispatch }) => {

    6.      let input

    7.

    8.      return (

    9.        

    10.       <form onSubmit={e => {

    11.         e.preventDefault()

    12.         if (!input.value.trim()) {

    13.           return

    14.         }

    15.         dispatch(addTodo(input.value))

    16.         input.value = ”

    17.       }}>

    18.         <input ref={node => input = node} />

    19.         <button type=”submit”>

    20.           Add Todo

    21.         </button>

    22.       </form>

    23.     

    24.   )

    25. }

    26. export default connect()(AddTodo)

    FilterLink.js

    Ini mewakili filter visibilitas saat ini dan membuat tautan.

    1.    import { connect } from ‘react-redux’

    2.    import { setVisibilityFilter } from ‘../actions’

    3.    import Link from ‘../components/Link’

    4.

    5.    const mapStateToProps = (state, ownProps) => ({

    6.      active: ownProps.filter === state.visibilityFilter

    7.    })

    8.

    9.    const mapDispatchToProps = (dispatch, ownProps) => ({

    10.   onClick: () => dispatch(setVisibilityFilter(ownProps.filter))

    11. })

    12.

    13. export default connect(

    14.   mapStateToProps,

    15.   mapDispatchToProps

    16. )(Link)

    VisibleTodoList.js

    Ini menyaring todos dan membuat TodoList.

    1.    import { connect } from ‘react-redux’

    2.    import { toggleTodo } from ‘../actions’

    3.    import TodoList from ‘../components/TodoList’

    4.    import { VisibilityFilters } from ‘../actions’

    5.

    6.    const getVisibleTodos = (todos, filter) => {

    7.      switch (filter) {

    8.        case VisibilityFilters.SHOW_ALL:

    9.          return todos

    10.     case VisibilityFilters.SHOW_COMPLETED:

    11.       return todos.filter(t => t.completed)

    12.     case VisibilityFilters.SHOW_ACTIVE:

    13.       return todos.filter(t => !t.completed)

    14.     default:

    15.       throw new Error(‘Unknown filter: ‘ + filter)

    16.   }

    17. }

    18.

    19. const mapStateToProps = state => ({

    20.   todos: getVisibleTodos(state.todos, state.visibilityFilter)

    21. })

    22.

    23. const mapDispatchToProps = dispatch => ({

    24.   toggleTodo: id => dispatch(toggleTodo(id))

    25. })

    26.

    27. export default connect(

    28.   mapStateToProps,

    29.   mapDispatchToProps

    30. )(TodoList)

    Langkah-7 Store

    Semua komponen kontainer memerlukan akses ke Redux Store untuk berlangganan. Untuk ini, kita perlu meneruskannya (simpan) sebagai prop ke setiap komponen kontainer. Namun, itu membosankan. Jadi kami merekomendasikan menggunakan komponen React Redux khusus yang disebutyang membuat penyimpanan tersedia untuk semua komponen container tanpa meneruskannya secara eksplisit. Ini digunakan sekali saat Anda merender komponen root.

    index.js

    1.    import React from ‘react’

    2.    import { render } from ‘react-dom’

    3.    import { createStore } from ‘redux’

    4.    import { Provider } from ‘react-redux’

    5.    import App from ‘./components/App’

    6.    import rootReducer from ‘./reducers’

    7.

    8.    const store = createStore(rootReducer)

    9.

    10. render(

    11.   <Provider store={store}>

    12.     <App />

    13.   </Provider>,

    14.   document.getElementById(‘root’)

    15. )

     

    Penjelasan rinci tentang contoh React-Redux dapat ditampilkan di sini: https://redux.js.org/basics/usage-with-react .

     

     

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.