React with Redux شرح بسيط كيفاش ممكن تخدم بيهم بلا متحتاج شي حاجة أخرى، غا نحاولوا نديرو

Fetch

ونجيبو شي مقالات من

Json placeholder API

أول حاجة نأنستاليو React

npx create-react-app play-with-redux
cd play-with-redux && code .

أنا تنخدم ب Visual Studio Code

من بعد، غا نأستاليو Redux and React Redux

npm I redux react-redux
mkdir store && touch index.js

لملجلد ديال store

غا نديرو فيه داك شي لي خاصنا كامل.

نفتحوا ملف ديال index.js

ونزيدو فيه

import { createStore } from 'redux'

const store = createStore()

export default store

Redux

تيعطينا

createStore

لي هي فانكشن تتخلينا نقادو ستور ديالنا ولكن باش يخدم خاصنا

Reducer

لي هي فانكشن تا هيتنخدموا بيها باش ممكن نخدمو مع ستور عن طريق

dispatch methood

فغا نزيدوه مع ستيت ديالنا

const initialState = {
    fetchingPosts: false,
    postsHasFetched: false,
    posts: []
}

const rootReducer = (state = initialState, action) => state

من بعد غا نزيدو 2 ديال actions

باش نتعاملوا مع state

واحد غا يكون ملي نبداو في جلب المقالات

POSTS_FETCHING_START

ولأخر ملي نساليوهم

POSTS_FETCHING_DONE

دابا ستور ديالنا غا تولي بحال هاكا

import { createStore } from 'redux'

const initialState = {
    fetchingPosts: false,
    postsHasFetched: false,
    posts: []
}

const rootReducer = (state = initialState, action) =>
{
    switch(action.type)
    {   
        case 'POSTS_FETCHING_START':

            return {
                ...state, 
                fetchingPosts: true
            }
        
        case 'POSTS_FETCHING_DONE':

            return {
                    ...state, 
                    fetchingPosts: false, 
                    postsHasFetched: true, 
                    posts: action.payload
                }

        default:
            return state;
    }
}


const store = createStore(rootReducer)

export default store

غا نمشيو ل App.js

وغادي نزيدو ستور ديالنا باش نشاركوعا مع العناصر كاملة لي عدنا

import React from 'react';
import { Provider } from 'react-redux'
import store from './store'

function App() {
  return (
    <Provider store={store}>
      
    </Provider>
  );
}

export default App;

غا نزيدو واحد العنصر لي فيه بوسطات كاملين ولي منوا غا نتعاملوا مع state

import React from 'react'

class Posts extends React.Component
{
  render()
    {
        return (
            <>
                
            </>
        )
    }
}

هنا فين غا نتعاملوا مع

react-redux

وغا نخدموا ب

connect

لي هي HOR: High order Component

غادا تخلي من لعنصر ديال posts

ك child

ملف ديال posts.js

غا يولي بحال هاكا

import React from 'react'
import { connect } from 'react-redux'

class Posts extends React.Component
{
  render()
    {
        return (
            <>
                
            </>
        )
    }
}

export default connect()(Posts)

فانكشن أو أنترفاش دسال connect

تتاخد 4 ديال لمدخلات لي هما:

mapStateToProps // تنزيدو ستيت لبروبز ديال لعنصر
mapDispatchToProps // تنخدموا بيها باش نتعاملوا مع ديسباتش ريوسنا وماشي ريدوكس
mergeProps // متنخدموش فيه في أغلب لحالات لحقاش لا فتنا تا خدمنا ب 1 - 2 فراه متيبقاش عندو دور بمرة
options // 

حنا غا نزيدور ليها غا لمدخل لأول صافي

const mapStateToprops = state => ({
    posts: state.posts,
    fetchingPosts: state.fetchingPosts,
    postsHasFetched: state.postsHasFetched,
})

ملف ديالنا تيولي بحال هاكا

import React from 'react'
import { connect } from 'react-redux'
// import fetchPosts from './store/FetchPosts'

class Posts extends React.Component
{
    render()
    {
        return (
            <>
                
            </>
        )
    }
}

const mapStateToprops = state => ({
    posts: state.posts,
    fetchingPosts: state.fetchingPosts,
    postsHasFetched: state.postsHasFetched,
})

export default connect(mapStateToprops)(Posts)

باش ممكن نجيبو لمقالات غا نخدموا ب life cycle hook componentDidMount

بحال هاكا

componentDidMount()
    {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                this.props.dispatch({ type: 'POSTS_FETCHING_START' })
                console.log(this.props)
                return response.json()
            })
            .then(json => {

                this.props.dispatch({
                    type: 'POSTS_FETCHING_DONE',
                    payload: json
                })

                console.log(this.props)
            })
    }

دابا بقا لينا غا UI

ديال مقالات لي غا نديرهم بحال هاكا

postsUI()
    {
        return this.props.posts.map( post => {
            return (
                <div key={post.id}>
                    <h4>{post.title}</h4>
                    <p>{post.body}</p>
                </div>
            )
        })
    }

ملف ديالنا في الأخير غا يكون بحال هاكا

import React from 'react'
import { connect } from 'react-redux'

// import fetchPosts from './store/FetchPosts'

class Posts extends React.Component
{
    postsUI()
    {
        return this.props.posts.map( post => {
            return (
                <div key={post.id}>
                    <h4>{post.title}</h4>
                    <p>{post.body}</p>
                </div>
            )
        })
    }

    componentDidMount()
    {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                this.props.dispatch({ type: 'POSTS_FETCHING_START' })
                console.log(this.props)
                return response.json()
            })
            .then(json => {

                this.props.dispatch({
                    type: 'POSTS_FETCHING_DONE',
                    payload: json
                })

                console.log(this.props)
            })
    }

    render()
    {
        return (
            <div>
                <h1>Hello Posts</h1>
                {this.postsUI()}
            </div>
        )
    }
}

const mapStateToprops = state => ({
    posts: state.posts,
    fetchingPosts: state.fetchingPosts,
    postsHasFetched: state.postsHasFetched,
})

export default connect(mapStateToprops)(Posts)