ساخت یک کامپوننت با ری اکت ریداکس و استفاده از اون

این موضوع کامپوننت های reusable چندین روش پیاده سازی داره از جمله
coustom hooks
HOC
props
پس باید کمی دقیق تر راجع بهش حرف بزنید و یک نمونه ساده شده از کدهاتون رو بزارین تا دیگران متوجه مسپله بشن.

من از hooks استفاده کردم. ولی در اصل سوال هیچ فرقی نمیکنه که از کدوم استفاده کنیم. شما مثلا یه چک باکس رو توی یه کامپوننت ایجاد میکنی و اسم ایونت چک یا un check کردن اون رو میزاری checkValue و اون رو توی استور ذخیره میکنی و هر بار اون تغییر کرد استور آپدیت میشه.
حالا همین کامپوننت رو توی یه صفحه میخوام چند بار استفاده کنم. با چک کردن یکی از چک باکسا همه چک شده میشن. راه حل میخوام که متمایزشون کنم از هم . طبیعی هست این مشکل چون همشون دارن checkValue رو توی استور آپدیت میکنن. یه راهی باید باشه..
این هم گفتم که بدون ریداکس این مشکل رو نداشتم و هر چند بار که میخواستیم از یه کامپوننت توی یه صفحه استفاده میکردیم
@kamran.davar
@hesammousavi

@kamran.davar
@hesammousavi
@sinashahoveisi
لطف میکنید این مثال رو پیاده سازی کنید:
قایل app.js

import React from 'react';
import './App.css';
import IncreamentNumber from './components/increament'
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <IncreamentNumber />
        <IncreamentNumber />
        <IncreamentNumber />
      </div>
    );
  }
}

export default App;

فایل Increament.jsx

import React from 'react';
import { connect } from 'react-redux';
import { Increament } from '../action';
const IncreamentNumber = props => {
    const increaseNumber = () => {
        props.dispatch(Increament(props.increament + 1))
        console.log(props.increament)
    }
    return (
        <React.Fragment>
            <div style={{ display: 'flex', marginTop: 20, marginLeft: 20 }}>
                <div style={{ marginRight: 10 }} >
                    <span>{props.increament}</span>
                </div>
                <div>
                    <button className="btn-btn-primary" onClick={increaseNumber} >Increament</button>
                </div>
            </div>
        </React.Fragment>
    )
};
const mapStateToProps = state => {
    return {
        increament: state.increament.increament,
    }
}
export default connect(mapStateToProps)(IncreamentNumber);

فایل index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from "./reducer";
const store = createStore(reducers);
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();
export default store;

فایل index.js برای action

export const Increament = increament => {
    return {
        type: "Increament",
        increament
    }
}

فایل reducer :

const defaultState = {
    increament: 0,
}
export const increament = (state = defaultState, action) => {
    switch (action.type) {
        case "Increament":
            return { ...state, increament: action.increament }
        default:
            return state;
    }
}

فایل index for reducer :

import {combineReducers} from 'redux';
import {increament} from './increament';
export default combineReducers({
    increament,
})

npm i redux react-redux

هم نصب بشه

@kamran.davar
@hesammousavi
@sinashahoveisi
من میخوام کامپوننت اینکریمنت رو هر چند بار که میخوام استفاده کنم و مقدار هر کامپوننت با تغییر یکی دیگه از کامپوننت ها تغییر نکنه.. ممنون میشم کمکم کنید.

سلام.
ایراد کار اینجاست که شما دارید از یک استیت خاص برای چند کامپوننت مختلف استفاده میکنید. منطقیه همه اون کامپوننت بران محتوای اون استیت خاص رو بخونن و نمایش بدن در نتیجه همه یک چیزو نشون بدن.
شما باید به ازای هر کامپوننت یک استیت تعریف کنید.
کدش رو نوشتم توی لینکدین میفرستم.